Poner iconos en Blogger
Mayo 16th, 2007 | Publicado por Francisco en Blogger | 11 Comentarios
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.
- 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”.
- 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.
- 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; } - 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.
Mayo 18th, 2007 a las 12:04 am (#)
me inscrivi a la web trate de instalar una plantilla nada no funciona y eso que hise lo recomendado
Mayo 18th, 2007 a las 2:51 am (#)
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!
Mayo 20th, 2007 a las 1:56 am (#)
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
Mayo 22nd, 2007 a las 8:20 pm (#)
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?
Junio 2nd, 2007 a las 4:22 am (#)
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
Junio 2nd, 2007 a las 4:23 am (#)
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
Junio 2nd, 2007 a las 7:16 pm (#)
Que tal Angel?
Para hacer esto tenemos este artículo:
http://blogyweb.blogspot.com/2007/03/perzonalizar-el-pie-de-navegacin.html
Un saludo!
Diciembre 15th, 2007 a las 3:48 am (#)
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
Abril 9th, 2008 a las 6:31 pm (#)
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………
Abril 13th, 2008 a las 4:35 am (#)
Hola, ¿cómo se podría poner un icono en los comentarios y que el número de comentarios apareciese encima?
Junio 4th, 2008 a las 10:40 am (#)
El icono .png solo lo veo con Firefox, con Explorer no funciona :/
Como hago??