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!
Publicaciones Relacionadas
trucos blog