Poner iconos en Blogger

Como te mostramos en el artículo “Poner iconos con CSS“, podemos colocar iconos en cualquier parte que tenga definida alguna clase CSS, por suerte, el sistema Blogger tiene prácticamente una clase para cada elemento y aquí te mostraremos como poner uno en los lugares de mayor interés.

1. 1. Entramos a la pestaña “Plantilla” o también llamada “Diseño” desde el escritorio y después a la opción “Edición de HTML”.

1. Ahi buscamos el siguiente código:

   ]]></b:skin>

   Justo antes de ese código están los estilos CSS y es donde que habrá que colocar las clases para nuestros iconos.

2. Ahora te mostraremos el código para diferentes partes de la plantilla, selecciona cuales deseas colocar y pégalos donde te señalamos.Lugar: Fecha de las entradas o post
   Icono:

   .date-header {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp2.blogger.com/_Zuzii37VUO4/Rkn-DuMBU_I/AAAAAAAABN0/CNp5q8l_KY8/s1600/time.png) center left no-repeat;
   }

   Lugar: Etiquetas en las entradas
   Icono:

   .post-labels {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp2.blogger.com/_Zuzii37VUO4/RfI1_yAns8I/AAAAAAAAAYI/5m8K2kkqYRw/s1600/etiqueta_naranja.gif) center left no-repeat;
   }

   Lugar: Autor entradas
   Icono:

   .post-author {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp1.blogger.com/_Zuzii37VUO4/RfebZS0300I/AAAAAAAAAcw/dBZjEJ39hDE/s1600/autor.gif) center left no-repeat;
   }

   Lugar: Comentarios en las entradas
   Icono:

   .comment-link {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp1.blogger.com/_Zuzii37VUO4/Rkqpd5yax8I/AAAAAAAABQg/tu-ANuj9tvo/s1600/icono-comentarios.gif) center left no-repeat;
   }

   Lugar: Feed al pie del blog
   Icono:

   .feed-links {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rj7ME-MBRJI/AAAAAAAAAwM/IOo-YUYR5aM/s1600/icono-feed.gif) center left no-repeat;
   }

   Lugar: Widget de Etiquetas
   Icono:

   #Label1 ul, #Label2 ul {
   list-style-type:none;
   }
   
   #Label1 li, #Label2 li {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp1.blogger.com/_Zuzii37VUO4/Rkqpd5yax-I/AAAAAAAABQw/GgkWpItuen4/s1600/icono-etiqueta-azul.gif) center left no-repeat;
   }

   Lugar: Título de la entrada
   Icono:

   .post-title {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp3.blogger.com/_Zuzii37VUO4/RkqqPZyayBI/AAAAAAAABRI/nNwfNreK6xM/s1600/icono-documento.gif) center left no-repeat;
   }

   Lugar: Fecha de comentario
   Icono:

   .comment-timestamp {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rkqpdpyax7I/AAAAAAAABQY/lPj-wAcTrRM/s1600/icono-calendario.gif) center left no-repeat;
   }

   Lugar: Backlinks
   Icono:

   #backlinks-container h4 {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp0.blogger.com/_Zuzii37VUO4/Rkqpdpyax6I/AAAAAAAABQQ/g0c6ItO8SaQ/s1600/icono-backlinks.gif) center left no-repeat;
   }

   Lugar: Lista de links
   Icono:

   #LinkList1 ul, #LinkList2 ul {
   list-style-type:none;
   }
   
   #LinkList1 li, #LinkList2 li {
   padding-left: 20px;
   padding-top: 5px;
   background: url(http://bp3.blogger.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;
   }

3. Una vez hallas pegado todos los que deseas usar, guarda y listo.

Recuerda que puedes cambiar algún icono especifico cambiando la ruta (dirección) del mismo, por la del que desees usar. En nuestra recopilación de iconos web gratuitos puedes encontrar algunas opciones o en este buscador de especializado

Los iconos usados aquí son de famfamfam.