Mil Trucos Blogger

Entradas Populares con Barras de Colores

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

Hace poco rediseñé el gadget de entradas populares de mi blog y le he añadido una simpática forma de barras de colores y a solicitud de un lector del blog hoy les comparto el truco.


Para agregar este truco primero deberas eliminar el gadget de entradas populares en el caso que lo tengas.

Luego deberas ir a la Edicion HTML de tu blog y debajo de /* Variable definitions
====================
agregar lo siguiente:

En el caso que tu plantilla sea nueva agrega lo siguiente:

<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#ff4c54"/>
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ff764c"/>
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ffde4c"/>
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#c7f25f"/>
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#33c9f7"/>
</Group>

En el caso que tu plantilla sea un poco mas antigua (no clasica) agrega lo siguiente:

<Variable default="#fa4242" description="background color1" name="PopularPosts.background.color1" type="color" value="#fa4242">
<Variable default="#ee6107" description="background color2" name="PopularPosts.background.color2" type="color" value="#ee6107">
<Variable default="#f0f" description="background color3" name="PopularPosts.background.color3" type="color" value="#ff00ff">
<Variable default="#ff0" description="background color4" name="PopularPosts.background.color4" type="color" value="#ffff00">
<Variable default="#0ff" description="background color5" name="PopularPosts.background.color5" type="color" value="#00ffff">

Ahora antes de ]]></b:skin> agrega lo siguiente:

#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:$(PopularPosts.background.color1);width:90%;}
#PopularPosts1 ul li:first-child:after{content:"1";}
#PopularPosts1 ul li:first-child + li{background:$(PopularPosts.background.color2);width:85%;}
#PopularPosts1 ul li:first-child + li:after{content:"2";}
#PopularPosts1 ul li:first-child + li + li{background:$(PopularPosts.background.color3);width:80%;}
#PopularPosts1 ul li:first-child + li + li:after{content:"3";}
#PopularPosts1 ul li:first-child + li + li + li{background:$(PopularPosts.background.color4);width:75%;}
#PopularPosts1 ul li:first-child + li + li + li:after{content:"4";}
#PopularPosts1 ul li:first-child + li + li + li + li{background:$(PopularPosts.background.color5);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;}

Busca <b:section-contents id=’sidebar-right-1′> (o en su defecto un código similar) y debajo de el agrega este otro código:

 <b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'>
<h2><data:title/></h2>
</b:if>
<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li>
<b:if cond='data:showThumbnails == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<b:else/>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.title' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
<b:else/>
<b:if cond='data:post.thumbnail'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnail'/>
<b:else/>
<img alt='no image' class='item-thumbnail' src='http://2.bp.blogspot.com/-XQt2v4x5dl8/T1zdpFh392I/AAAAAAAABUU/xMJZDedw38k/s1600/default.jpg'/>
</b:if>
<a expr:href='data:post.href' expr:title='data:post.snippet' rel='bookmark'><data:post.title/></a>
<div class='clear'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/></div></b:includable></b:widget>

Ahora en el gadget de entradas populares selecciona el numero de  entradas a mostrar (recomiendo no mas de 5).

Por último, si queremos cambiar los colores de cada barra sólo habrá que acudir al Diseñador de Plantillas…

Escritorio ► Plantilla ► Personalizar ► Avanzado ► PopularPosts Backgrounds

…y desde allí ir seleccionando los que nos gustan.

Via/Oloblogger

0
Shares

Relacionados...

Deja tu Reacción sobre el artículo
Me Gusta Dichoso Feliz Admirado Triste Enojado

47 Comentarios

  1. Mayo 31, 2012    

    :O Queda muy elegante tal ves los pruebe mas adelante

    • Mayo 31, 2012    

      Arcandres usalo que de verdad es genial el truco 😀

  2. Mayo 31, 2012    

    Muchas gracias por la aportación. Lo voy a poner en mi blog.
    Saludos

    • Mayo 31, 2012    

      Gracias a ti por comentar Marian y como le decia a Arcandres usalo que es muy espectacular el resultado final 😎

  3. Mayo 31, 2012    

    amigo no encuentro la variable definitions en mi plantilla???

    • Mayo 31, 2012    

      Es uno de los primeros codigos que aparece en la plantilla.

  4. Anonymous Anonymous
    Mayo 31, 2012    

    Estoy recabando informacion para crear un blog, tu sitio lo dejare en mis favoritos.

    Saludos.

    • Mayo 31, 2012    

      Vaya honor que me haces con tu comentario amigo,gracias por comentar.

  5. Junio 1, 2012    

    nada Juvinao ya busque por todos lados y no la encuentro,me puedes indicar otra forma de como pegar el primer codigo amigo por favor

  6. Junio 1, 2012    

    nada Juviano no lo encuentro por ningun lado,me puedes indicar otra forma de donde colocar el codigo por favor quiero aplicar este efecto a mi pagina

    • Junio 3, 2012    

      Es que si no encuentras el primer codigo entonces no puedes agregar el resto de codigos.

      Para hallar los codigos mas facil,oprime Control-F y alli pega el codigo a buscar.

  7. Junio 10, 2012    

    Este codigo me ha traido mas de un dolor de cabeza no lo logro encontrar y encontra algo parecido pero al aplicarlo me queda igual como si tubiese el gadget normal

    • Junio 16, 2012    

      Pero cual codigo es el que no encuentras 😕

  8. Junio 10, 2012    

    Juvinao a mi no me funciona esto :(. y es porque el codigo último no aparece en la plantilla y eso qeue es la de taringa V5 pero no me sale que puede ser?

    Un saludo.

    • Junio 16, 2012    

      Busca un codigo similar (lo mas similar posible) y agrega alli el siguiente paso.

  9. Junio 11, 2012    

    Necesito ayuda Juvinao porque quiero implementarlo tambien necesitaria ayuda para otra cosa pero veo que no contestas a los correos :(.

    • Junio 16, 2012    

      AtaSystem es que estaba bastante ocupado pero ya estoy de vuelta.

  10. Junio 11, 2012    

    Muchas gracias aunque no me queda bien en el blog 🙁
    Aun así se lo recomendé a mis amigos y está en mi pagina de favoritos. Siempre que tengo una duda vengo aquii ^.^

    • Junio 16, 2012    

      Gracias por agregar la pagina a tus favoritos 😀

  11. Junio 19, 2012    

    Juvinao sigo esperando tu ayuda sobre este post porque en mi plantilla no sale esta linea:

    espero que sepas como solucionarlo. Un saludo

    • Junio 22, 2012    

      AtaSystem exactamente que problema tienes.

  12. Junio 24, 2012    

    Sugoi!!! (increíble) Ya lo he puesto en mi blog y luce requete bien . Gracias a ti, cada día mi blog mola más 😀 Y para agradecértelo te doy un +1 ^^

    • Junio 24, 2012    

      Gracias Adelina por el +1 y me da mucho gusto que te haya servido el truco. 😛

      Saludos

  13. Junio 30, 2012    

    Muy buenas Juvinao, me aparece el error bX-s0p6ke cuando agrego el ultimo codigo, porque sera?

  14. Junio 30, 2012    

    Ya lo solucioné, hacia conflicto con el widget que tenia antes de Entradas Populares

    • Julio 1, 2012    

      Pues que bien que ya lo hayas solucionado 😀

  15. Agosto 4, 2012    

    no se me cambian los colores una vez que agrego el widget, me encantan tus trucos!

    • Agosto 5, 2012    

      Si agregastes bien los codigos?

      Me da mucho gusto que te encanten mis trucos 😀

    • Agosto 5, 2012    

      sisi puse todo bien porque de hecho se ve en mi blog el widget pero no adquiere los colores 🙁

    • Agosto 6, 2012    

      Pues dejame la URL de tu blog para ver cual es el problema.

  16. Agosto 12, 2012    

    Es una pasada, gracias por compartir, graciassss

    • Agosto 14, 2012    

      Gracias por comentar amigo 😀

  17. Agosto 12, 2012    

    Muy bonito :D, Gracias Juvinao..
    Me gusto tu WEB esta muy bien organizada.
    esta a Seguir!!

    • Agosto 14, 2012    

      Jyon_xD_Anime me da mucha felicidad que te haya gustado mi blog,trato de tenerla muy bien organizada..

      Saludos :man:

  18. Agosto 19, 2012    

    oye el ultimo código no da amigo!!

    • Agosto 21, 2012    

      Luis exactamente que problema tienes..

  19. Septiembre 6, 2012    

    Oye hermano tampoco me aparece este codigo (/* Variable definitions)porfas si tienes una solcucion damela gracias hermano q estes bien…

    • Septiembre 8, 2012    

      Ernesto busca un codigo similar a ese,puede que no sea identico en tu plantilla.

  20. Septiembre 9, 2012    

    Gracias amigo lo intentare saludos 😉

  21. Lua Lua
    Septiembre 28, 2012    

    Hola!! Antes que nada, que buen blog!!
    Me gustaría saber como puedo poner un tipo de letra, similar o igual al de tu cabecera, que está genial de hecho uno así en todos mis gadgets!!
    Te lo agradezco!!!!!
    😀

    • Septiembre 29, 2012    

      Amigo la font del titulo se llama Coupe-Bold

  22. Noviembre 3, 2012    

    Excelente aporte Gracias me sirvio

  23. Febrero 4, 2014    

    buen post
    de casualidad dsabes como como cambiar el numero de entradas populares a mas de 10?
    saludos!

    • Abril 15, 2014    

      No amigo, ese es el limite de entradas que establece Blogger.

      Saludos

  24. Abril 13, 2014    

    ]]> no encuentro eso en mi codigo :_

    • Abril 15, 2014    

      Ese es el código para colocar el CSS, todas las plantillas lo tienen :-s

      Saludos

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Categorías

Síguenos en Facebook

Suscribete por Email

Introduce tu Correo:

Recibiras nuestros últimos posts en tu correo