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

esejoker468 Siguiendo
Seguidores
6

1
Pi
Marketing
Verificación en dos pasos activada
Suscripción a IA
Desde
16 Ene 2011
Mensajes
6.448
Edad
28
Que onda Forobetanos!!

Aquí una ves mas, con mis tutoriales para Blogger :p8:
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:
Post-Populares.png

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:
Insertar CODE, HTML o PHP:
]]></b:skin>

Y por encima de el, coloca el siguiente código:
Insertar CODE, HTML o PHP:
* 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

Admin
Sigma
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
¡Excelente comerciante!
Suscripción a IA
Desde
6 Abr 2009
Mensajes
11.327
Tutorial aprobado y agregado al listado.
 

Eliop

Lambda
Social Media
Verificación en dos pasos desactivada
Desde
12 Jun 2011
Mensajes
2.881
Perfecto hermano, mil gracias.
Lo aplicare para un blog nuevo :)
 

JuanDRomero

Eta
SEO
Verificación en dos pasos desactivada
Desde
14 Ago 2011
Mensajes
1.461
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.
 
Última edición:

Zuruck

Iota
Verificación en dos pasos activada
Desde
14 Abr 2012
Mensajes
2.258
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

1
Pi
Marketing
Verificación en dos pasos activada
Suscripción a IA
Desde
16 Ene 2011
Mensajes
6.448
Edad
28
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.
 

ForeroGamer

Gamma
SEO
Verificación en dos pasos desactivada
Desde
18 Nov 2011
Mensajes
493
Por favor, ten en cuenta 📝 que si deseas hacer un trato 🤝 con este usuario, está baneado 🔒.
es bueno para los que quieren ocupar espacio jeje
 

webbber

Préstamo
Xi
Redactor
Verificación en dos pasos desactivada
Desde
5 Jul 2010
Mensajes
4.478
excelente, me gusta mucho, vere en que blog lo pongo a trabajar.
 

serra2012

Beta
Verificación en dos pasos desactivada
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
3 Abr 2012
Mensajes
111
buenisimo, gracias por compartir con todos nosotros
 

Humoristech

1
Mi
Redactor
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
Verificado por Binance
Suscripción a IA
Desde
14 Ene 2019
Mensajes
3.484
Edad
49
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

Préstamo
1
Iota
Verificado
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Verificado por Binance
Suscripción a IA
Desde
30 Ene 2019
Mensajes
2.428
Gracias lo pondre a prueba.
 

¡Regístrate y comienza a ganar!

Beneficios

  • Gana dinero por participar
  • Gana dinero por recomendarnos
  • Descubre ofertas de empleo diariamente
  • Negocios seguros
  • ¡Información premium y más!

Acceder

¿Ya tienes una cuenta? Accede aquí

Arriba