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!

Escrito por:

Mi nombre es Antonio, soy sobre todo Sevillista y apasionado con los blog desde el 2007.

Sígueme en: | Facebook | Twitter | Google+

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"