Blogger

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. 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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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(https://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.

11 Comentarios

  • me inscrivi a la web trate de instalar una plantilla nada no funciona y eso que hise lo recomendado

  • Que tal Gerardo!

    Vi tus blogs y estan en la versión clásica de blogger y todas estas plantillas trabajan en el nuevo.

    Para este sistema puedes bajar plantillas en:

    https://btemplates.com

    O bien, cambiarte al nuevo y usar las de BlogyWeb

    Saludos!

  • Que tal nachio:

    Gracias por el apunte, pero la fecha tiene esa clase al menos en todas las plantillas que he checado:

    <h2 class="date-header">22 mayo, 2007</h2>

    En que plantilla encontraste esa clase?

  • Quisiera poner unos iconos con flechas debajo de una imagen como lo ago llevo dias dandole vueltas y nada, deseo una cosa parecida a la que te neis en la pagina las flechas para pasar de pajina

  • deso colocar ven mi blog unas flechas para pasar de pajina igual que teneis vosotros y la verad soy un poco pardillo en esto. me podeis decir como lo puedo hacer. un abrazo y muy buena la web

  • orale esta padre el post es de gran ayuda y muy facil de usar

    no me tome mucho tiempo 😉

    aunk el de las etiquetas en la barra de menu salio abajo de las letras =(

    pero se ve chido jajaja 😉

    si si si

    adios

    esta padre el blog..

    bueno ya es web..

    jejeje

  • Primero un saludo Fran!! Sobra felicitarte, pero vamos hay lo llevas….
    «Enreando» como tantas veces en el blog, ya por fin le empiezo a darle una forma, acorde con mi idea… Me estoy volviendo majara con el rollo de los iconos y es que la cosa es, que tanto el icono del autor como el de las entradas, me sale por detrás del texto…No se si me explico…El «Te lo dijo…» y el «Guardado en…» me salen encima de los iconos…
    He estado intentando, cambiando tamaño y demás….pero que va, me veo limitado….te lo agradeceria

    Un saludo………

  • Hola, ¿cómo se podría poner un icono en los comentarios y que el número de comentarios apareciese encima?