Tutorial: Post más visitados tipo Engadget

esejoker468

1
Pi
Marketing
Verificación en dos pasos desactivada
Desde
16 Ene 2011
Mensajes
5.845
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:

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
Verificado con videollamada
Verificación en dos pasos desactivada
Verificado por Whatsapp
¡Ha verificado su Paypal!
¡Excelente comerciante!
Desde
6 Abr 2009
Mensajes
4.358
Tutorial aprobado y agregado al listado.
 

Eliop

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

IGNACIO

VIP
Mi
SEO
Verificación en dos pasos activada
Verificado por Whatsapp
Desde
7 Dic 2011
Mensajes
3.221
esta buenisimo muchas gracias!!!
 

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: Estrés y depresión (pagina nueva) pero aca no: Truco online (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 desactivada
Desde
14 Abr 2012
Mensajes
2.260
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 desactivada
Desde
16 Ene 2011
Mensajes
5.845
Ya veo que no me funciono fue en una pagina.

Mira aca me funciona: Estrés y depresión pero aca no: Truco online, 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

Zeta
Verificación en dos pasos desactivada
Desde
10 Oct 2010
Mensajes
1.808
muy bueno y para blogger encima.
 

ForeroGamer

Baneado
Gamma
SEO
Verificación en dos pasos desactivada
Desde
18 Nov 2011
Mensajes
493
es bueno para los que quieren ocupar espacio jeje
 

esejoker468

1
Pi
Marketing
Verificación en dos pasos desactivada
Desde
16 Ene 2011
Mensajes
5.845
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

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

serra2012

Beta
Verificación en dos pasos desactivada
Desde
3 Abr 2012
Mensajes
111
buenisimo, gracias por compartir con todos nosotros
 

fullpablo

Kappa
Verificación en dos pasos desactivada
Desde
17 Mar 2010
Mensajes
2.540
Muy bueno, gracias por el dato. :encouragement:
 

warkings

Eta
Redactor
Verificación en dos pasos desactivada
Verificado por Whatsapp
Desde
26 Jul 2012
Mensajes
1.324
esta muy bueno :D lo probe y andubo :D
 

Crea una cuenta o accede para comentar

Debes ser un miembro para poder comentar

Crear cuenta

Crea una cuenta en nuestra comunidad

Acceder

¿Ya tienes una cuenta? Accede aquí


Arriba