15 abril 2013

Destaca tu logo al comentar como autor

logo-comentarios-autor

Como habréis observado, son muchos los blogger que tienen colocado al comentar como autor, su logo o imagen carasterictica de su blog. Pués bien, esto es lo que os voy a explicar hoy, la forma de colocar dicho logo o imagen en vuestros blog.
Para ello vamos a utilizar una imagen en base64, para no llamar al http y así aligerar la carga del blog. Esta imagen aparece al lado derecho del nombre del autor del blog como habréis podido observar en la imagen de esta entrada.

Pasos a seguir:
1.- Reducir la imagen que deseamos a 18px por 18px. (usar cualquier editor) .
2.- Subimos la imagen por ejemplo a Picassa y copiamos la URL. (picassa)
3.- La convertimos a Base64 entrando en esta web
Introducimos la URL de la imagen que alojamos en Picassa y clik en "Enviar consulta"
Nos devuelve la imagen ya convertida a Base64, ¿un poco larga verdad?, cópiala y guardala.

4.- Vamos a colocar el CSS de la imagen para que esto tenga efecto:
Plantilla > Editar HTML > Buscamos (ctrl+f o la tecla f3) </b:skin> > Expande el CSS y volvemos a buscar </b:skin> y justamente antes colocamos el siguiente código:

.comments .comments-content .icon.blog-author{ background-repeat:no-repeat; background-image:url(IMAGEN BASE64)}

En IMAGEN BASE colocamos la que teníamos guardada antes y listo, ya podemos disfrutar de nuestro logo o imagen en nuestros comentarios.

Si tienes alguna duda.....!No dejes de comentarla!

Por favor, comente de acuerdo al tema del artículo.
Serán removidos todos los Comentarios con enlaces.
Si quieres recibir los nuevos comentarios marca "Avisarme"