Blog and Web

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 practicamente una clase para cada elemento y aquí te mostraremos como poner uno en los lugares de mayor interes.

  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”.
  2. Ahi buscamos el siguiente código:
    ]]></b:skin>

    Justo antes de ese código estan los estilos CSS y es donde que habra que colocar las clases para nuestros iconos.

  3. Ahora te mostraremos el código para diferentes partes de la plantilla, selecciona cuales deseas colocar y pegalos 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;
    }
  4. 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 nustra recopilación de iconos web gratuitos puedes encontrar algunas opciones o en este buscador de especializado

Los iconos usados aquí son de famfamfam.