Blogsticker para tu blog

Acabo de colocar ahora mismo un sticker en el blog, a decir verdad, los he puesto también en mis otros blogs. :-) ¡Me encantan!
Supongo que a estas alturas ya sabréis que me refiero a esa barrita que veis arriba del blog a la izquierda de "hecho en España", las hay de diversas temáticas, contra el maltrato, el cáncer, de películas, etc.
Las he descubierto hace un ratito gracias a UBH, es muy sencillo ponerlas, solo hay que seguir unos pocos pasos.
Visitad UBH y allí os informan de todo. ;-)

Blockquote o pullquote

Esta tarde curioseando por alguno de mis blog favoritos me he encontrado en BlogU con las instrucciones para aplicar un pullquote a la plantilla.
Un pullquote es una especie de cita o nota que se añaden a los post para resaltar alguna idea o algo que queramos destacar dentro del texto.
Para lograr este efecto tan bonito hemos de andar con el CSS de la plantilla.
Localizamos esta parte en el HTML de nuestra plantilla:

.post blockquote {
margin:1em 20px;
}
.post blockquote p {
margin:.75em 0;
}

Y la sustituimos por esta otra:

.pullquote {
float: right;
width: 150px;
margin: 5px 5px 5px 10px;
padding: 3px 0;
font: Verdana, sans-serif;
color: #555;
text-align: center;
font-size: 1.4em;
border-top: 3px double #ccc;
border-bottom: 3px double #ccc;
}
.pullquote p {
padding: 0;
margin: 0;
}
Se puede cambiar el color del borde y del texto, modificando la parte que está destacada de otro color en el código.

Hay que colocar este otro código en cada entrada que se publique, para que sea más fácil y cómodo podemos copiarlo y pegarlo en Opciones - Formato - Caja de Plantilla de entrada, así saldrá automáticamente en cada creación de entrada, sino queremos usarlo en alguna de ellas, eliminamos el código y listo.

<blockquote class="pullquote"><p>...Texto que va dentro del pullquote...</p></blockquote>

<p>Texto del post...

Como no me apetece implementarlo en mi blog, os dejo una captura de BlogU para que os hagáis una idea de como queda...

Plantillas para la "clasica" de Blogger

Para los que aún estáis usando la plantilla clásica de Blogger esta web es una delicia...¡son los templates más bonitos que he visto ultimamente!. He hecho un blog de pruebas con la clásica solo para ver algunas de ellas en "acción" quedan muy bien y no dan ningún problema de instalación (al menos las que yo he probado, que han sido cuatro).
¿Mi favorita? La de la hormiguita, sin duda.

Botón de cierre

Con un simple botón damos la posibilidad de cerrar la página, al hacer click sobre él aparece un cartelito que te pregunta si deseas cerrarla (IE).
Código:

<input name="button" type="button" onclick="window.close();" value="Clic para cerrar">

Resultado:



Puedes cambiar "cerrar página" por el texto que quieras mostrar en el botón.
No se si os será útil, pero por si acaso ;-)

Links sin subrayado

Si no te gusta para nada el efecto subrayado de tus links, puedes hacer que desaparezca fácilmente.

Sitúate en tu plantilla HTML y localiza esta parte (está casi al principio antes de Header), cambias "underline" por "none" y ya tienes tus link sin subrayar.


a:hover {
color:$titlecolor;
text-decoration:underline;
}
a img {
border-width:0;
}

/* Header
-----------------------------------------------

Iconos que adornan mi blog

Acabo de añadir al blog unos iconos en la sidebar al lado de "Archivos" y "Ultimos comentarios", he estado un rato poniendo y cambiando de sitio las imágenes hasta que he logrado colocarlas donde yo quería. Así lo he conseguido:

Tenéis que subir las imágenes que queráis poner a un servidor de archivos, y a la url (dirección) resultante añadirle img src=, quedaría así:

<img src="http://img341.imageshack.us/img341/189/carpetaru0.gif"/>
(Esta es mi imagen de archivos, la de la carpeta)
<img src="http://img68.imageshack.us/img68/6104/platicaov9.gif"/>
(Esta es mi imagen de comentarios, gente hablando)
Podéis usarlas si queréis.

En plantilla - HTML - expandir artilugios, buscamos esta parte del código:

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'>

<b:includable id='main'>

<b:if cond='data:title'>

<h2><data:title/></h2>

Justo después de <h2> colocamos la imagen, es decir así:

<h2>
<img src="http://img341.imageshack.us/img341/189/carpetaru0.gif"/><data:title/></h2>

---

Para los comentarios lo mismo, buscamos esta parte:

<b:widget id='Feed1' locked='false' title='Ultimos comentarios' type='Feed'>

<b:includable id='main'>

<h2><data:title/></h2>

Y añadimos la imagen:

<b:widget id='Feed1' locked='false' title='Ultimos comentarios' type='Feed'>

<b:includable id='main'>

<h2>

<img src='http://img68.imageshack.us/img68/6104/platicaov9.gif'/><data:title/></h2>

De esta manera es posible colocar una imagen casi en cualquier parte de la plantilla solo hay que ir probando y mirando en vista previa...

---

No quería publicar esta entrada sin añadir una imagen a los comentarios en vista expandida y acabo de conseguir meterla a base de mucho probar. Cuando se expande una entrada en la etiquetas la imagen se verá delante del autor de cada comentario. Esta es la imagen que he escogido y su url (usarla si queréis).
<img src='http://img211.imageshack.us/img211/4458/10104gd8.jpg'/>


En esta parte del HTML podéis ver donde la he metido (la imagen está en destacada en negrita):
<b:loop values='data:post.comments' var='comment'>

<dt class='comment-author' expr:id='"comment-" + data:comment.id'>

<a expr:name='"comment-" + data:comment.id'/>

<b:if cond='data:comment.authorUrl'>

<a expr:href='data:comment.authorUrl' rel='nofollow'><img src='http://img211.imageshack.us/img211/4458/10104gd8.jpg'/><data:comment.author/></a>

<b:else/>

<data:comment.author/>

</b:if>

<data:commentPostedByMsg/>

Todo esto lo he hecho un poco "de oído", es decir, a mi manera, así que supongo que habrá alguna otra forma de hacerlo mejor,pero a mi me sirve para ver el blog como quería, así que no le doy más vueltas...

Cambiar las barras de separación por una imagen

Recuerda
que aunque yo pruebe los "trucos"
Antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

En un post del blog de Gem@ se explica, de dos formas distintas, como colocar una imagen (barra o divider) separando cada post.
Yo lo he logrado de otra manera:

1- Situate en Plantilla, edición HTML

2- Busca el siguiente código:
post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em; }

3- Cambia esta parte: border-bottom:1px dotted $bordercolor; por esta otra background:url("http://URL DE TU IMAGEN") no-repeat bottom left;

Quedaría así:

.post {
margin:.5em 0 1.5em;
background:url("http://URL DE TU IMAGEN")
no-repeat bottom left;
padding-bottom:1.5em; }

De la misma manera he sustituido la barra de separación en la sidebar por una imagen:

Buscas este código en tu plantilla - HTML:

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Y lo sustituyes por este:

.sidebar .widget, .main .widget { background:url("http://URL DE TU IMAGEN")
no-repeat bottom left;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Tienes que cambiar la url (dirección) "URL DE TU IMAGEN" por la de tu barra.

No necesitas haber eliminado antes la barra que viene en Blogger, al hacer esto se elimina automáticamente, dando paso a la imagen.

Solucionado!!

He conseguido por fin después de mucho pelearme con la plantilla que el blog se vuelva a ver correctamente en IE, o eso creo, yo al menos lo veo bien. Como ya habréis notado he tenido que prescindir del diseño anterior porque, sinceramente, aún no se que hacia que se viera mal... :-$ y me he dedicado a ir quitando cosas hasta que se solucionó. Está claro que algo había que al "señor" IE no le gustaba, por ejemplo la sidebar a la derecha, si la vuelvo a poner allí se me desplaza hacia abajo (con lo que me gustaba a ese lado :-( ) en fin, todo sea por facilitar las cosas a la gente que aún lo usa...
Al fin y al cabo, el diseño del blog no es lo más importante, incluso yo diría que ahora se ve más limpito y ordenado que antes...

Ultima actualización del blog

Si quieres mostrar a tus visitantes cuando has actualizado la página por última vez solo has de copiar este código:

<script language="JavaScript" type="text/javascript">

<!--

// last modified script by Bernhard Friedrich; should work in all browsers

var a;

a=new Date(document.lastModified);

lm_year=a.getYear();

if (lm_year<1000){ //just in case date is delivered with 4 digits

if (lm_year<70){

lm_year=2000+lm_year;

}

else lm_year=1900+lm_year;

} //end workaround

lm_month=a.getMonth()+1;

if (lm_month<10){

lm_month='0'+lm_month;

}

lm_day=a.getDate();

if (lm_day<10){

lm_day='0'+lm_day;

}

document.write("Última actualización " + lm_day+'/'+lm_month+'/'+lm_year);

// -->

</script>

Lo he probado en la sidebar (añadir HTML-Javascript) y queda bien.
Así se verá:

Última actualización 26/03/2007

Aumenta las visitas en tu blog

Para conseguir aparecer correctamente en los buscadores, no solo es necesario darte de alta en ellos, sino tener correctamente configurado el código de tu blog para que dichos buscadores tomen la información necesaria de tu página. Nada mas imprescindible que las "Meta tags", que son utilizadas por los principales buscadores para mostrar los resultados de búsqueda.
Las meta tags están colocadas normalmente después del <head> de la plantilla HTML, Blogger añade un par de ellas por defecto, pero es recomendable añadir nosotros las que creamos conveniente. Lo más sencillo es recurrir a un generador de metas tags online este, por ejemplo, es el que he usado yo: WebExperto
Una vez obtenido el código para las meta tags, se copia y pega donde os he comentado antes (Plantilla-HTML-Después de <head>, y ya tendréis el blog optimizado para los robots de búsqueda.

También os recomendaría (yo lo he hecho) añadir la meta tag de Google.
Accedéis a Sitemaps Google con vuestra cuenta de Google:


Añadis vuestro sitio
Os pedirá que verifiquéis vuestra página
Aquí has de seleccionar un metodo de verificación, expandis el menú y escogéis "Añadir etiqueta Meta"

Por último os dará el código de la meta tags, lo copiáis y lo pegáis en el HTML de la plantilla encima de las otras metas anteriores (o de las que ya tengáis vosotros)
Después de colocar la meta tag de Google, vuelves a la página (mejor no salgas mientras lo haces, así es más fácil) y verificas tu sitio. No te preocupes si en ese momento te dice que no pueden encontrar tu Meta, vuelves un poco más tarde y lo intentas de nuevo...
¡Suerte!

Nota: Si al intentar guardar los cambios Blogger marca un error como este: Mensaje de error de XML: The element type "meta" must be terminated by the matching end-tag necesitaréis cerrar las meta-tagas, añadiendo la barra de cierre / al final de cada una.

Blog con Internet Explorer

He comprobado esta mañana que el Escaparate se ve fatal en Internet Explorer, mientras trato de solucionarlo, os ruego a los que uséis ese navegador, me disculpéis.
Por cierto, aprovechando este post, os recomendaría que probaseis el Firefox, yo era de las del IE de toda la vida :-( hasta que por un problema con un virus me recomendaron cambiar y no me arrepiento en absoluto...
Cambiaros de verdad que merece la pena... ;-)

Texto en movimiento en un momento...

Escribes el texto, click en "generate" y listo, hasta ocho modelos de texto en movimiento.

Se puede escoger el tipo de fuente para el texto, el color del fondo, tipo, tamaño y color de la letra que vayas a usar, he incluso te muestran la carta de colores con sus códigos correspondientes.

En un segundo tienes a tu disposición el código con su ejemplo visual; más fácil imposible.

Lo encuentro muy útil para no tener que andar pensando... "¿como era el código de marquee?" y para los más novatos pues está muy bien esta ayuda ¿no os parece?.

Solo queda probarlo:

Crea tus propios tonos para movil

En esta web puedes crear tonos para el móvil de forma personalizada, en unos pocos pasos y además gratis. Acepta prácticamente todos los archivos menores de 15 Kb. Lo he probado y va fantástico:
Pinchas en Browse y escoges una canción en tu PC.



(Upload song)Pones el título e interprete de la canción y pinchas en "Next Step".


Donde dice "Tone length" pones los segundos de duración del tono y pinchas en Set. Colocas la barrita negra en el trozo que quieres escuchar como tono y pinchas en "Save Tone"


Te dan un código, lo copias, lo pegas en tu navegador y te saldrá una pantalla para descargarte el tono a tu PC.


Lo pasas a tu móvil y ya tienes tu nuevo tono.

Quitar el borde punteado de los links en Firefox

Cuando utilizas el buscador Firefox, los títulos de las entradas y algunos de los links del blog se ven con un cuadradito punteado alrededor cuando pinchas sobre ellos.
Esto no es ningún problema, pero si eres algo "puntillos@" y el efecto no te gusta, puedes evitarlo tan solo con incluir este código en tu plantilla:
a:active
{
outline: none;
}

a:focus
{
-moz-outline-style: none;
}

Has de meterlo entre <head> y </head>, en la parte CSS de tu plantilla, por ejemplo antes de
/* Header -------------------------------------*/ estaría bien.

Días Online

¿Quieres mostrarle a todo el mundo los días que tu blog lleva operativo en la red?

<script language="javascript">

function diasonline(){
fecha= new Date();
hoy = new Date(fecha.getFullYear(),fecha.getMonth()+1,fecha.getDate());

// Reemplazar abajo por la fecha de inicio de tu sitio (aaaa,mm,dd)
inicio = new Date(2007,01,19)

resta = hoy.getTime() - inicio.getTime();

resultado = Math.floor(resta/(1000*60*60*24));

document.write("Nuestro sitio lleva "+resultado+" dias online");<
}
</script>

<font face="verdana" color="red" size="2"><script language="javascript">diasonline()</script></font>

Nota
Has de cambiar dentro del código la fecha que sale por defecto, por la de inicio de tu blog, el resultado será algo así:

Nuestro sitio lleva X días Online

También puedes cambiar en el código el texto que quieres que se muestre.

Link con texto o imagenes en movimiento

Usando la propiedad "marquee" se pueden obtener efectos muy chulos, como estos links de texto o imagen que pasan y se detienen al pasar el puntero sobre ellos.

Código:

<marquee onmouseover="stop()" onmouseout="start()" scrollamount="2" scrolldelay="100" direction="up">AQUI LOS LINKS</marquee>

Resultado:

ImageShack
Wikipedia
Blogger

Si quieres cambiar la velocidad en "scrolldelay" cambias el 100 por el número que quieras.
Para hacer que el texto se desplace de arriba abajo cambias "up" por "down".

Con imagenes:






Si además añadimos (justo después de marquee) las propiedades "heigh" y "width" podemos modificar el ancho y alto de la marquesina.

¡Suerte y a disfrutar!

Respuesta a una consulta: Para darle la altura y anchura deseada ponéis HEIGHT=300px WIDTH=100px al principio justo después de marquee, y cambiáis el número de px según lo necesitéis.

Mostrar una "ventana" a otra web

Si lo que pretendes es hablar en tu blog de otra web y deseas dar una vista previa de la web en cuestión a tus visitas, puedes hacerlo usando IFRAME.
Código:

<iframe src="url de la web" frameborder="0" frameborder="no" scrolling="yes"></iframe>

Ejemplo:


Añadir la propiedad "width" y "heigth" para obtener el alto y el ancho deseado.

Por cierto, esa página que estáis viendo es el Blog de César, donde podéis encontrar un montón de cosas interesantes para la mejora de vuestros blogs.

Contador de abrazos

Seguro que usas un contador de visitas en tu blog y te gusta, de vez en cuando, controlar como suben los numeritos. ¿Qué te parecería hacer lo mismo pero para contar abrazos?. Solo has de ingresar a esta web, pones tu nick o el nombre que deseas mostrar y haces click en "SET ME UP".

Copias el código y a ¡recibir abrazos! :-)
Cada vez que alguien te de un abrazo (virtual, eso si, pero no menos lindo) el número del panelito lo reflejará y la imagen cambiará, además la imagen del panel cambia cada vez que se "refresca" la página.





¡Abrazos que me han dado !
¡ABRAZAME!
Pon el "abrazador" en tu blog

Navbar (barra Blogger) mágica!!

He encontrado otra forma de ocultar la navbar, es decir la barra de Blogger, y que se muestre solamente
al pasar el cursor sobre ella.

Se colocan dos líneas de código en la plantilla-HTML justo antes del principio de la sección CSS, por ejemplo donde lo he puesto
en mi plantilla, antes de:

/* Use this with templates/template-twocol.html */
body {

Código:

#navbar-iframe{opacity:0.0;filter:alpha(Opacity=0)}
#navbar-iframe:hover{opacity:1.0;filter:alpha(Opacity=100,FinishedOpacity=100)}

Nota: el truco funciona con Firefox, en IE simplemente oculta la barra.

Encontrado en : BlogU

Adornar el pie del post (post footer)

Recuerda
que aunque yo pruebe los "trucos",
antes de hacer ningún cambio
GUARDA SIEMPRE TU PLANTILLA
Nunca es seguro
que todo salga bien...

En el pie de la entrada es donde vemos el nombre del autor, la hora de publicación,los comentarios..., podemos ponerle una imagen de fondo para mejorar su estética y, a la vez, para evitar que se confunda con el texto del post.

Buscamos una imagen que nos resulte apropiada, para el ejemplo he escogido una un poco psicodélica, la verdad, pero así se ve mejor el ejemplo, creo yo...



Buscamos esta parte de la plantilla (post-footer), que se verá dependiendo de la plantilla de cada uno, como algo parecido a esto:

.post-footer {
margin: .75em 0;
color:$sidebarcolor;
text-transform:uppercase;
letter-spacing:.1em;
font: $postfooterfont;
line-height: 1.4em;
}

Y la sustituimos por esta otra:

.post-footer {
margin-bottom:15px;
margin-left:0px;
font-size: 87%;
background-image: url(http://img87.imageshack.us/img87/4306/ce021qt7.gif);
background-position: top center;
background-repeat: repeat;
}

El resultado será algo como esto:



Si además queremos añadirle un borde al post-footer, en el mismo código añadiremos una línea más de código parecida a esta:

border: 1px solid #ddd;

Ahí cambiamos según nuestras necesidades, el grosor del borde, el tipo de borde y el color.

¡Suerte!

Publicar código en el Blog

Cristian me deja en un comentario esta consulta, así que he decidido en honor a él explicarlo en un post.
Para que Blogger muestre el código en una entrada sin necesidad de usar textarea hemos de sustituir los carácteres de apertura y cierre < > por sus entidades equivalentes, para la apertura usamos & lt ; y para el cierre & gt ; escrito sin espacios (he tenido que ponerlo separado para que Blogger no lo interprete). Yo suelo hacerlo siempre a mano, copiando y pegando, pero si os resulta más fácil podéis usar un convertidor de cadenas como este de Aulambra o el de Chuano que es el que yo uso habitualmente.
¿Verdad que no es difícil?

Buenas noches Cristian y ¡felices sueños!

Menú en forma de pestañas en Blogger

He recibido varios emails donde me solicitaban ayuda para conseguir poner el menu en el blog tal como lo tengo yo, en forma de pestañas en la parte superior de la página.
He de deciros que yo lo conseguí siguiendo los pasos de Trucos Blogger que a su vez tomó la idea de Hoctro's Place, aclarado este punto,sigamos con lo nuestro...

Antes de empezar has de tener etiquetados todos tus post sino es imposible que puedas colocar las pestañas.

1- Vamos a la Plantilla en Edicion de Html y Expandimos las plantillas de artilugios.

2- Buscamos este trozo de código: <b:section class="header" id="header" maxwidgets="1" showaddelement="no"> y lo cambiamos por este otro:
<b:section class="header" id="header" maxwidgets="2" showaddelement="yes">

3-Justo antes de: ]]></b:skin> colocamos este codigo completo:

/*- Menu Tabs F */

#tabsF {
float:left;
width:100%;
font-size:80%;
line-height:normal;
border-bottom:1px solid #000;

}
#tabsF ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabsF li {
display:inline;
margin:0;
padding:0;
}
#tabsF a {
float:left;
background:url("http://3.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qIJ35QkI/AAAAAAAAGxQ/t48-cC0Ogkk/s400/tableftF.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabsF a span {
float:left;
display:block;
background:url("http://1.bp.blogspot.com/_8PJ-pgoBhWQ/Sf9qMJVnJmI/AAAAAAAAGxY/K6ntns2CUvI/s400/tabrightF.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#666;
}
/* Commented Backslash Hack hides rule from IE5-Mac */
#tabsF a span {float:none;}
/* End IE5-Mac hack */
#tabsF a:hover span {
color:#FFF;
}
#tabsF a:hover {
background-position:0% -42px;
}
#tabsF a:hover span {
background-position:100% -42px;
}

4- Guardamos cambios.
En este momento añadimos las etiquetas al blog.
Nos dirigimos a la Plantilla--Elementos de la pagina--Añadir nuevo elemento de pagina, y añadimos las Etiquetas.

5- Por ultimo buscamos el siguiente codigo:

<b:widget id='Label1' locked='false' title='Etiquetas' type='Label'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title><h2>
<b:if>
<div class='widget-content'>
<ul>
<b:loop values='data:labels' var='label'>
<li>
<b:if cond='data:blog.url == data:label.url'>
<data:label.name/>
<b:else/>
<a expr:href='data:label.url'><data:label.name/></a>
</b:if>
(<data:label.count/>)
</li>
</b:loop>
</ul>

<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

lo cambiamos por:

<b:widget id='Label1' locked='false' title='' type='Label'>
<b:includable id='main'>
<div id='tabsF'>
<ul>
<li><a expr:href='data:blog.homepageUrl'><span>Inicio</span></a></li>
<b:loop values='data:labels' var='label'>
<li><a expr:href='data:label.url'><span><data:label.name/></span></a></li>
</b:loop>
</ul>
<!-- <b:include name='quickedit'/> -->
</div>
</b:includable>
</b:widget>

6- ¡Ya está listo! Si todo ha ido bien, las pestañas deberían estar situadas en el sidebar de nuestro blog, solo queda moverlas a la parte superior arrastrándolas hacia allí.
Si os apetece probar con otros modelos, podéis verlos en exploding boy, pinchando sobre ellos en esa misma página con el botón derecho, escoges "ver código fuente" y tendrás el código CSS para cada uno de los menús del ejemplo.

Aviso:

El menú está teniendo fallos de visualización porque donde han sido alojadas las imágenes de las pestañas hay problemas. Para solucionarlo he subido las imágenes a Blogger y las he incluido de nuevo en el código CSS, así que solo tenéis que cambiar las url que estáis usando por las nuevas.

El euro

Si tienes que usar en tu blog alguna vez el símbolo del euro: €.
La línea de código sería:

& euro ; (sin espacios)

Resultado:

€

Parece una tontería pero hoy me lo han preguntado por email y he tenido que consultarlo a mi vez con un colega, porque yo tampoco lo sabía...

Incluir un sistema de envio de postales en el blog

¿Cómo funciona?

Muy fácil.!!
1. Cuando alguien envía una postal con este sistema envía también una invitación para que el receptor de la postal visite tu página web.
2. El receptor recibe la postal en su correo, una invitación para visitar tu página web y la opción de que notifique al remitente que ya ha leído la postal.
3. La notificación de lectura envía otro mensaje para que la persona que inicialmente había visitado tu web y había enviado la postal vuelva a visitar tu sitio web.

Se han enviado 2 mensajes con las respectivas invitaciones a visitar tu web y no te ha costado nada. Ellos habilitan todo el sistema y proveen del ancho de banda necesario.
Puedes ponerlo en forma de banner para que apenas ocupe espacio.

Imagen flotante en blogger

Algunos de los que habéis pasado alguna vez antes por mi blog habréis visto hace tiempo, la imagen de una mosca (IE) que estaba a la derecha de la página, simplemente la puse ahí un poco a "ojo" probando aquí y allá en la plantilla, pero, sinceramente, no fui capaz a ponerla como quería, es decir, flotante o lo que es lo mismo que cuando bajes la página se mantenga siempre en la misma posición. Hoy he conseguido ponerla así gracias a LIAMNGLS, os recomiendo una visita a su blog, allí os explica como poner una imagen flotante de una forma sencilla y fácil de entender, además su blog tiene otras muchas cosillas interesantes.
¡Que os divirtáis!

Añadido:Abajo, en los comentarios de esta misma entrada, he puesto como conseguir la imagen flotante de una forma más sencilla y que se ve en IE y Firefox.
Antes de </head> ponéis esto:
<a href='http://URL DE TU BLOG.blogspot.com/' style='display:scroll;position:fixed;bottom:0px;right:0px;'><img src='URL DE TU IMAGEN'/></a>

Recomendar a un amigo.

¿Quieres que tus visitantes o tu mismo puedan recomendar tu blog a sus amigos enviando el enlace del blog mediante un formulario?
Con este sencillo script puedes hacerlo fácilmente ( lo he probado y funciona bien):

<form name="eMailer">

ENVÍA ESTA PÁGINA A UN AMIGO

<br>

Indica su e-mail:

<br>

<input type="text" name="address" size="25">

<br>

<input type="button" value="Send this URL" onClick="mailThisUrl();">

</form>



<script language="JavaScript1.2">

// (C) 2000 www.CodeLifter.com

// Este y otros muchos javascripts

// los encontraras en MundoJavascript.com



var good;

function checkEmailAddress(field) {

// the following expression must be all on one line...

var goodEmail = field.value.match(/\b(^(\S+@).+((\.com)|(\.net)|(\.edu)|(\.mil)|(\.gov)|(\.org)|(\..{2,2}))$)\b/gi);

if (goodEmail){

good = true

} else {

alert('Por favor introduce un e-mail valido')

field.focus()

field.select()

good = false

}

}



u = window.location;

m = "Pienso que te puede interesar esta página...";

function mailThisUrl(){

good = false

checkEmailAddress(document.eMailer.address)

if (good){

// the following expression must be all on one line...

window.location = "mailto:"+document.eMailer.address.value+"?subject="+m+"&body="+document.title+" "+u;

}

}

</script>

Resultado:

ENVÍA ESTA PÁGINA A UN AMIGO


Indica su e-mail:









También puedes usar la opción de generarlo en alguna web, los hay bien bonitos.
Ejemplo:

powered by ijijiji

Virus Blog!!!

Una especie de meme que circula por la blogosfera sin más intención que provocar una sonrisa. ¿Te animas a tener un virus en tu blog? de broma, claro. El bichito es una mónadita verde ¿a que si?

Let me infect your blog, please?

¿Cuantas personas están visitando tu blog?

Esta herramienta nos indica la cantidad de personas que están visitando nuestro blog en ese momento, es un codigo sencillo que encontramos en esta página,has de indicar la dirección del blog y una dirección de correo. Elegimos el color del botón contador, y nos da el código.

Si os gusta más tenerlo en forma de texto podéis visitar Trucos para Blogger donde te explican como hacerlo de forma muy clara con un simple código.

De la misma forma, es decir, tipo texto, podéis obtener el código en esta web sin necesidad de registraros (este es el que actualmente uso en este blog).

Generador de fotos curiosas.

Me he encontrado una página donde puedes introducir la frase que quieras en cualquiera de las fotos que tienen de muestra. El resultado es bastante simpático y resultón ¿o no?:

Velocidad de conexión

Puedes saber cual es tu velocidad real de conexión a internet de una forma rápida y sencilla.
Teclea "velocidad de conexión" en Google y pulsa el botón "voy a tener suerte".

Efecto para links

Cuando pasas el puntero sobre cualquier link del blog este se agranda al tamaño que tu decidas, además se verán de un bonito color rojo (los títulos de las entradas también cambian) puedes comprobar el efecto en este mismo blog. En el código el tamaño de las letras está en "24", en mi plantilla lo he puesto en "15" y he colocado el código en plantilla-HTML, justo antes de ]]></b:skin<

Código:
<style fprolloverstyle>a:hover {color: #FF0000; font-size: 24pt; font-weight: bold}</style>
¡Qué te diviertas!

Añadido: He quitado el efecto en mi blog porque no me gustaba, pero funciona, está comprobado...