Añadiendo iconos al blog

Aunque ya he publicado anteriormente como añadir un icono en algunos de los enlaces de nuestro blog por separado, he pensado reunir en esta entrada los ya publicados y alguno más.

Icono antes de la fecha de las entradas

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

h2.date-header {

Justo debajo de esa línea añadimos esto:

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

Icono antes del título de entradas

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

.post h3 {

Justo debajo de esa línea añadimos 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

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.post-author {
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

Tendremos que añadir estas líneas de código 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

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.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

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

.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

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

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

Icono antes del "Suscribirse a:"

Localizaremos en nuestra plantilla (Edición de Html) sin expandir artilugios esta línea de código:
.feed-links {
Justo debajo de esa línea añadimos esto:

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

Icono antes del "Vínculos a esta entrada"

Tendremos que añadir estas líneas de código 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 las etiquetas en la sidebar

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

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

En Blogger se pueden añadir las etiquetas varias veces, por lo que 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

Tendremos que añadir estas líneas de código en el CSS de nuestra plantilla antes de ]]></b:skin>:

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

En Blogger se pueden añadir más de un elemento lista, por lo que cada vez que queramos que el icono se vea en las nuevas listas, 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;
}

Notas:

En todos los casos hemos de sustituir url_de_nuestro_icono por la url (dirección) del icono que vayamos a colocar en cada caso.

En "padding-left" pondremos la medida en pixeles en función del tamaño del icono, si el icono mide por ejemplo 16px de ancho, con poner 20px quedará bien.

Ver también: Links externos con iconos