Tutorial: Cómo dar estilo al gadget 'Entradas populares' en Blogger

[esejoker468]

Que onda Forobetanos!!

Aquí una ves mas, con mis tutoriales para Blogger 😛8:
Nuestro amigo [MENTION=59]SoloNegocios[/MENTION] compartió este Tutorial: http://forobeta.com/tutoriales-de-wordpress/71571-mas-comentado-tipo-engadget.html
pero es para Wordpress, hoy les enseñare, hacer eso mismo, pero para Post mas Visitados en Blogger.
Lo mejor es que es con puro CSS, y muy sencillo de hacer.


Este sera el resultado:

De lujo que no? 🙂


PASO 1: Ve a Blogger, y entra al blog donde quieres darle este estilo a tus post mas visitados.

Paso 2: Ve a Plantilla > Edicion de HTML

Paso 3: Busca el siguiente codigo:

]]></b:skin>

Y por encima de el, coloca el siguiente código:

* Gadget Post Populares
----------------------------------------------- */
#PopularPosts1 ul{margin:0;padding:5px 0;list-style-type:none}
#PopularPosts1 ul li{position:relative;margin:5px 0;border:0;padding:10px}
#PopularPosts1 ul li:first-child{background:#ff4c54;width:90%}
#PopularPosts1 ul li:first-child:after{content:"1"}
#PopularPosts1 ul li:first-child + li{background:#e69138;width:85%}
#PopularPosts1 ul li:first-child + li:after{content:"2"}
#PopularPosts1 ul li:first-child + li + li{background:#f1c232;width:80%}
#PopularPosts1 ul li:first-child + li + li:after{content:"3"}
#PopularPosts1 ul li:first-child + li + li + li{background:#93c47d;width:75%}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4"}
#PopularPosts1 ul li:first-child + li + li + li + li{background:#9fc5e8;width:70%}
#PopularPosts1 ul li:first-child + li + li + li + li:after{content:"5"}
#PopularPosts1 ul li:first-child:after,#PopularPosts1 ul li:first-child + li:after,#PopularPosts1 ul li:first-child + li + li:after,#PopularPosts1 ul li:first-child + li + li + li:after,#PopularPosts1 ul li:first-child + li + li + li + li:after{position:absolute;top:20px;right:-15px;border-radius:50%;background:#353535;width:30px;height:30px;line-height:1em;text-align:center;font-size:28px;color:#fff}
#PopularPosts1 ul li .item-thumbnail{float:left;border:0;margin-right:10px;background:transparent;padding:0;width:40px;height:40px}
#PopularPosts1 ul li a{font-size:12px;color:#444;text-decoration:none}
#PopularPosts1 ul li a:hover{color:#222;text-decoration:none}
}

Después guarda los cambios!

Por ultimo, ve a Diseño > Añadir un Gadget. Y ahora, agreguen el Gadget llamado "Entradas populares". y coloquenlo donde quieran 🙂

eso es todo!, lo que hace ese código, es darle estilo al Gadget de "Entradas populares".

espero y utilicen este tutorial, para dar estilo a su Gadget!


Un "me agrada" no te cuesta nada 🙂 (hasta rimo xD)

 

[Carlos Arreola]

Tutorial aprobado y agregado al listado.

 

[Eliop]

Perfecto hermano, mil gracias.
Lo aplicare para un blog nuevo 🙂

 

[IGNACIO]

esta buenisimo muchas gracias!!!

 

[JuanDRomero]

No me funciono tio.

 

[esejoker468]

No me funciono tio.

:/, imposible, solo es agregar ese código CSS para darle estilo al gadget, solo agrega ese CSS en tu plantilla, imposible que no te funcione.

 

[JuanDRomero]

Ya veo que no me funciono fue en una pagina.

Mira aca me funciona: Enlace eliminado (pagina nueva) pero aca no: Enlace eliminado (pagina vieja con muchos css y modificaciones)

Edito: aun nada, debe ser algo de blogger que no me deja editar los gadget.

 

[Zuruck]

Yo lo tengo hace bastante tiempo en mi sitio pero estilo ALT1040, por el color, pasate por el blog de la firma y mira.:welcoming:

 

[esejoker468]

Ya veo que no me funciono fue en una pagina.

Mira aca me funciona: Enlace eliminado pero aca no: Enlace eliminado, debe ser que estoy usando algo en los gadget

que raro que no te funcione en el otro blog :/

Yo lo tengo hace bastante tiempo en mi sitio pero estilo ALT1040, por el color, pasate por el blog de la firma y mira.:welcoming:

igual a este, le puedes dar el color que quieras, solo edita el código de los colores.

 

[frN13]

muy bueno y para blogger encima.

 

[ForeroGamer]

es bueno para los que quieren ocupar espacio jeje

 

[esejoker468]

es bueno para los que quieren ocupar espacio jeje

es bueno, MUY BUENO, para darle estilo a tu blog, y disminuir el porcentaje de rebote, y hacer que tus visitantes se queden mas tiempo ya que leerán los artículos en TOP :encouragement:

 

[webbber]

excelente, me gusta mucho, vere en que blog lo pongo a trabajar.

 

[serra2012]

buenisimo, gracias por compartir con todos nosotros

 

[portescence]

Muy bueno!

 

[fullpablo]

Muy bueno, gracias por el dato. :encouragement:

 

[warkings]

esta muy bueno 😀 lo probe y andubo 😀

 

[belalugosi]

Muy util la ayuda!

 

[Humoristech]

Desconocía éste tutorial. Quiero colocarlo pero probaré con el gadget HTML porque no me gusta tocar la plantilla desde un ataque que sufrieron mis sitios. Agradecido con esto. Éxitos

 

[Coderz]

Gracias lo pondre a prueba.