Lorem Ipsum Dolor .......

Lorem ipsum lorem ipsum lorem ipsum lorem ipsum.......

Poner iconos en las entradas.

Hola, este truco sirve para poner imagenes en las entradas de los blogs.

Post:

Para la fecha:


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


Para las etiquetas:

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


Para el autor:

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

Para el titulo del post:

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

Para la fecha de los comentarios:

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


Para los comentarios:

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


Sidebar:


Para los links:


#LinkList1 ul, #LinkList2 ul {
list-style-type:none;
}

#LinkList1 li, #LinkList2 li {
padding-left: 20px;
padding-top: 5px;
background: url(http://4.bp.blogspot.com/_Zuzii37VUO4/RkqqDZyayAI/AAAAAAAABRA/Dils27GC_tU/s1600/icono-links.gif) center left no-repeat;
}



Para los blacklinks:


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


Para las etiquetas:

#Label1 ul, #Label2 ul {
list-style-type:none;
}

#Label1 li, #Label2 li {
padding-left: 20px;
padding-top: 5px;
background: url(http://2.bp.blogspot.com/_Zuzii37VUO4/Rkqpd5yax-I/AAAAAAAABQw/GgkWpItuen4/s1600/icono-etiqueta-azul.gif) center left no-repeat;
}

Footer:

Para el feed:


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


Listo :) .

9 comentarios:

maurypaez dijo...

Hola primero que tod muy vacano tu blog... pero tengo un problemita

Coloque una imagen en las entradas de mi blog y la imagen siempre me sale debajo del titulo de la entrada....

Mi pregunta es que tengo que hacer para que el titulo de mi entrada se pueda correr para la derecha sin que tape el icono....

Te agradesco la ayuda que me puedas brindar...

maurypaez dijo...

Hola primero que todo esta excelente tu blog..

Bueno lo que pasa es lo siguiente, coloque un icono en las entradas de mi blog pero resulta que el icono sale debajo del titulo de la entrada....

Mi pregunta es como hago para correr todos los titulos de las entradas para la derecha...

Te agradesco de antemano la ayuda que me puedas brindar....

N. dijo...

Porfavor, me gustaría saber dónde tengo que poner el código para el icono en los links. Gracias.


Visita: http://elblogdelordenata.blogspot.com

Nhelson Bolaños dijo...

mi pregunta también donde colocar el código y si está bien o hay que hacer cambios...

Publicar un comentario