Hace poco rediseñe el gadget de entradas populares de mi blog y le he añadido una simpatica 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 codigo similar) y debajo de el agrega este otro codigo:
 <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 selcciona 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

Publicar un comentario en la entrada Blogger

  1. :O Queda muy elegante tal ves los pruebe mas adelante

    ResponderEliminar
    Respuestas
    1. Arcandres usalo que de verdad es genial el truco :D

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

    ResponderEliminar
    Respuestas
    1. Gracias a ti por comentar Marian y como le decia a Arcandres usalo que es muy espectacular el resultado final :cool:

      Eliminar
  3. amigo no encuentro la variable definitions en mi plantilla???

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

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

    Saludos.

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

      Eliminar
  5. 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

    ResponderEliminar
  6. 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

    ResponderEliminar
    Respuestas
    1. 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.

      Eliminar
  7. 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

    ResponderEliminar
    Respuestas
    1. Pero cual codigo es el que no encuentras :?

      Eliminar
  8. 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.

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

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

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

      Eliminar
  10. 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 ^.^

    ResponderEliminar
    Respuestas
    1. Gracias por agregar la pagina a tus favoritos :D

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

    espero que sepas como solucionarlo. Un saludo

    ResponderEliminar
    Respuestas
    1. AtaSystem exactamente que problema tienes.

      Eliminar
  12. 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 :D Y para agradecértelo te doy un +1 ^^

    ResponderEliminar
    Respuestas
    1. Gracias Adelina por el +1 y me da mucho gusto que te haya servido el truco. :P

      Saludos

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

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

    ResponderEliminar
    Respuestas
    1. Pues que bien que ya lo hayas solucionado :D

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

    ResponderEliminar
    Respuestas
    1. Si agregastes bien los codigos?

      Me da mucho gusto que te encanten mis trucos :D

      Eliminar
    2. sisi puse todo bien porque de hecho se ve en mi blog el widget pero no adquiere los colores :(

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

      Eliminar
  16. Es una pasada, gracias por compartir, graciassss

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

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

      Saludos :man:

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

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

      Eliminar
  19. 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!!!!!
    :D

    ResponderEliminar
    Respuestas
    1. Amigo la font del titulo se llama Coupe-Bold

      Eliminar
  20. Excelente aporte Gracias me sirvio

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

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

      Saludos

      Eliminar
  22. Respuestas
    1. Ese es el código para colocar el CSS, todas las plantillas lo tienen :-s

      Saludos

      Eliminar

Comenta y exprésate, Tu opinión es importante

 
Top