DECORANDO EL BLOG CON ICONOS

Icono antes de la fecha de las entradas:

Localizaremos en nuestra plantilla (Edición de Html) sin expandir los artilugios esta línea de código:

h2.date-header {

Debajo le añadimos esto:

padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;

Icono antes del titulo de las entradas:

-como en el anterior, localizamos esta linea de código, sin expandir los artilugios:

.post h3 {

-Debajo le pegámos esto:

padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;

Icono antes del autor en el pie de las entradas:

Para conseguir ésto tenemos que pegar este código justo antes de ]]></b:skin>:

que está en el CSS de nuestra plantilla.

.post-author {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes del "Vínculos a esta entrada":

Lo colocaremos en el CSS de nuestra plantilla, antes de ]]></b:skin>:

#backlinks-container h4 {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de la hora de publicación de entradas:

Realizaremos lo mismo que antes, en el CSS de nuestra plantilla antes de ]]></b:skin>:

.post-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "comentarios" en el pie de las entradas:

En el CSS antes de ]]></b:skin>: añadirémos este código

.comment-link {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de "etiquetas" en el pie de las entradas:

En el CSS antes de ]]></b:skin>: añadirémos esto:

.post-labels {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de la fecha de publicación de comentarios:

En el CSS antes de ]]></b:skin>: añadirémos esto:

.comment-timestamp {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes del "Suscribirse a:"

Sin expandir los artilugios buscamos esta líne de código: .feed-links { justo debajo le pegamos esto:

.feed-links {
padding-left: 20px;
padding-top: 5px;
background: url(url_de_nuestro_icono) center left no-repeat;
}

Icono antes de las etiquetas en la sidebar:

En el CSS de nuestra plantilla, antes de ]]></b:skin>:


Pegamos esto:

#Label1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Como en blogger se pueden añadir mas de una etiqueta, cada vez que queramos que el icono se vea en las nuevas etiquetas, añadiremos su id en el mismo código separada por una coma:

#Label1 li, #Label2 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Icono antes de las listas en la sidebar:

Colocaremos este código en el CSS antes de ]]></b:skin>:


#LinkList1 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

Como en blogger se pueden añadir las listas, cada vez que queramos que el icono se vea en las nuevas etiquetas, añadiremos su id en el mismo código separada por una coma:

#LinkList1 li, #LinkList2 li, #LinkList3 li {
list-style:none;
padding-left: 30px;
background: transparent url(url_de_nuestro_icono) no-repeat center left;
}

• Donde pone: "padding-left" podemos cambiar la medida en pixeles en función del tamaño del icono, si el icono mide por ejemplo 10px de ancho, con poner 14px quedaría estupendamente.

• Donde pone URL de nuestro icono pondremos la dirección (URL) de nuestra imágen o icono.

Este truco lo ví en el Escaparate de Rosa, pero está editado y algo cambiado por Jaime Trujillo Escobedo