English Português

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.

Escrito por Francisco Oliveros

Soy un gran aficionado del diseño y de todo lo que el código puede comunicar. Ingeniero mecánico por profesión, pero dedicado al desarrollo web a tiempo completo.

Blog / Twitter

Artículos relacionados

Sigue leyendo consejos, tips y tutoriales para tu blog.

    Comentarios

    1. Gerardo Echegaray / Hace 10 años /

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

      Responder a Gerardo Echegaray →
    2. Francisco / Hace 10 años /

      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:

      http://plantishas.blogspot.com

      O bien, cambiarte al nuevo y usar las de BlogyWeb

      Saludos!

      Responder a Francisco →
    3. Nachio… / Hace 10 años /

      En el ícono de la fecha del artítulo publicado no es

      .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;
      }
      ..sino que …

      .timestamp-link {
      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;
      }

      Buen blog

      Responder a Nachio… →
    4. Francisco / Hace 10 años /

      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?

      Responder a Francisco →
    5. ANGEL NOVILLO / Hace 10 años /

      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

      Responder a ANGEL NOVILLO →
    6. ANGEL NOVILLO / Hace 10 años /

      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

      Responder a ANGEL NOVILLO →
    7. Francisco / Hace 10 años /

      Que tal Angel?

      Para hacer esto tenemos este artículo:

      http://blogyweb.blogspot.com/2007/03/perzonalizar-el-pie-de-navegacin.html

      Un saludo!

      Responder a Francisco →
    8. .::kyx:::. / Hace 10 años /

      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

      Responder a .::kyx:::. →
    9. bandalico / Hace 9 años /

      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………

      Responder a bandalico →
    10. flamenquin / Hace 9 años /

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

      Responder a flamenquin →
    11. Mirita / Hace 9 años /

      El icono .png solo lo veo con Firefox, con Explorer no funciona :/
      Como hago??

      Responder a Mirita →

    Responder

    ¡Gracias por dejar tu opinión! Por favor procura que tus comentarios estén dentro tema, que no sean promocionales (spam), ilegales u ofensivos, de otro modo, serán borrados. Todos los enlaces serán moderados y la URL indicada NO será enlazada.

    Blog and Web es un blog de Blógstica. Hospedado desde 2008 en Liquid Web.

    Términos de uso - Política de privacidad