Entradas Populares con Barras de Colores

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

Share

47 thoughts on “Entradas Populares con Barras de Colores

  • mayo 31, 2012 at 9:17 am
    Permalink

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

    Reply
    • mayo 31, 2012 at 2:41 pm
      Permalink

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

      Reply
    • mayo 31, 2012 at 7:36 pm
      Permalink

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

      Reply
  • mayo 31, 2012 at 7:26 pm
    Permalink

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

    Saludos.

    Reply
    • mayo 31, 2012 at 7:37 pm
      Permalink

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

      Reply
  • junio 1, 2012 at 12:09 am
    Permalink

    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

    Reply
  • junio 1, 2012 at 12:10 am
    Permalink

    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

    Reply
    • junio 3, 2012 at 5:01 pm
      Permalink

      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.

      Reply
  • junio 10, 2012 at 8:25 am
    Permalink

    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

    Reply
  • junio 10, 2012 at 8:41 am
    Permalink

    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.

    Reply
    • junio 16, 2012 at 2:49 am
      Permalink

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

      Reply
  • junio 11, 2012 at 11:30 am
    Permalink

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

    Reply
    • junio 16, 2012 at 2:51 am
      Permalink

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

      Reply
  • junio 11, 2012 at 5:48 pm
    Permalink

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

    Reply
  • junio 19, 2012 at 9:00 am
    Permalink

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

    espero que sepas como solucionarlo. Un saludo

    Reply
  • junio 24, 2012 at 12:19 pm
    Permalink

    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 ^^

    Reply
    • junio 24, 2012 at 5:25 pm
      Permalink

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

      Saludos

      Reply
  • agosto 4, 2012 at 7:19 pm
    Permalink

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

    Reply
    • agosto 5, 2012 at 3:16 am
      Permalink

      Si agregastes bien los codigos?

      Me da mucho gusto que te encanten mis trucos 😀

      Reply
    • agosto 5, 2012 at 5:41 pm
      Permalink

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

      Reply
    • agosto 6, 2012 at 7:28 pm
      Permalink

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

      Reply
  • agosto 12, 2012 at 6:48 pm
    Permalink

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

    Reply
    • agosto 14, 2012 at 9:02 pm
      Permalink

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

      Saludos :man:

      Reply
  • septiembre 6, 2012 at 2:38 am
    Permalink

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

    Reply
    • septiembre 8, 2012 at 11:57 pm
      Permalink

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

      Reply
  • septiembre 28, 2012 at 2:07 am
    Permalink

    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!!!!!
    😀

    Reply
  • febrero 4, 2014 at 9:41 pm
    Permalink

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

    Reply

Deja un comentario

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