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

Relacionados

Configura tu Dominio DonWeb (By Dattatec) para Blo... Muchos que optamos por adquirir un dominio para nuestro blogger nos mandamos a buscar precios accesibles a nuestra cartera y nos olvidamos si la empre...
Como alojar script en Google Sites Cuantas veces no nos ha pasado que queremos algun truco y al principio funciona pero con el correr del tiempo el servidor donde esta alojado el script...
Instalar Google Analytics en Blogger fácilmente Google Analytics es el servicio de estadísticas mas completo que hay para seguirle el paso a tu sitio web, ofrece completos informes de múltiples as...
Convierte tu plantilla de Blogger en Responsive Una de las cosas por las cuales nos tenemos que preocupar nosotros los blogueros, es por al constante apoyo de la tecnología, pues lo que es nuevo ho...

Share

47 comentarios en “Entradas Populares con Barras de Colores

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

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

Deja un comentario

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

Puedes usar las siguientes etiquetas y atributos HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>