Entradas Populares con Barras de Colores

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
Previous
Next Post »

47 comentarios

Click here for comentarios
30 de mayo de 2012, 21:27 ×

:O Queda muy elegante tal ves los pruebe mas adelante

Responder
avatar
admin
31 de mayo de 2012, 2:17 ×

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

Responder
avatar
admin
31 de mayo de 2012, 7:40 ×

Arcandres usalo que de verdad es genial el truco :D

Responder
avatar
admin
31 de mayo de 2012, 7:41 ×

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

Responder
avatar
admin
31 de mayo de 2012, 9:47 ×

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

Responder
avatar
admin
Anónimo
31 de mayo de 2012, 12:26 ×

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

Saludos.

Responder
avatar
admin
31 de mayo de 2012, 12:36 ×

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

Responder
avatar
admin
31 de mayo de 2012, 12:37 ×

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

Responder
avatar
admin
31 de mayo de 2012, 17:09 ×

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

Responder
avatar
admin
31 de mayo de 2012, 17:10 ×

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

Responder
avatar
admin
3 de junio de 2012, 10:01 ×

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.

Responder
avatar
admin
10 de junio de 2012, 1:25 ×

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

Responder
avatar
admin
10 de junio de 2012, 1:41 ×

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.

Responder
avatar
admin
11 de junio de 2012, 4:30 ×

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

Responder
avatar
admin
11 de junio de 2012, 10:48 ×

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

Responder
avatar
admin
15 de junio de 2012, 19:47 ×

Pero cual codigo es el que no encuentras :?

Responder
avatar
admin
15 de junio de 2012, 19:49 ×

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

Responder
avatar
admin
15 de junio de 2012, 19:51 ×

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

Responder
avatar
admin
15 de junio de 2012, 19:53 ×

Gracias por agregar la pagina a tus favoritos :D

Responder
avatar
admin
19 de junio de 2012, 2:00 ×

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

espero que sepas como solucionarlo. Un saludo

Responder
avatar
admin
22 de junio de 2012, 8:15 ×

AtaSystem exactamente que problema tienes.

Responder
avatar
admin
24 de junio de 2012, 5:19 ×

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

Responder
avatar
admin
24 de junio de 2012, 10:25 ×

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

Saludos

Responder
avatar
admin
30 de junio de 2012, 10:09 ×

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

Responder
avatar
admin
30 de junio de 2012, 10:34 ×

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

Responder
avatar
admin
1 de julio de 2012, 12:15 ×

Pues que bien que ya lo hayas solucionado :D

Responder
avatar
admin
4 de agosto de 2012, 12:19 ×

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

Responder
avatar
admin
4 de agosto de 2012, 20:16 ×

Si agregastes bien los codigos?

Me da mucho gusto que te encanten mis trucos :D

Responder
avatar
admin
5 de agosto de 2012, 10:41 ×

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

Responder
avatar
admin
6 de agosto de 2012, 12:28 ×

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

Responder
avatar
admin
11 de agosto de 2012, 17:06 ×

Es una pasada, gracias por compartir, graciassss

Responder
avatar
admin
12 de agosto de 2012, 11:48 ×

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

Responder
avatar
admin
14 de agosto de 2012, 14:00 ×

Gracias por comentar amigo :D

Responder
avatar
admin
14 de agosto de 2012, 14:02 ×

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

Saludos :man:

Responder
avatar
admin
18 de agosto de 2012, 22:40 ×

oye el ultimo código no da amigo!!

Responder
avatar
admin
21 de agosto de 2012, 8:30 ×

Luis exactamente que problema tienes..

Responder
avatar
admin
5 de septiembre de 2012, 19:38 ×

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

Responder
avatar
admin
8 de septiembre de 2012, 16:57 ×

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

Responder
avatar
admin
8 de septiembre de 2012, 17:47 ×

Gracias amigo lo intentare saludos ;)

Responder
avatar
admin
Lua
27 de septiembre de 2012, 19:07 ×

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

Responder
avatar
admin
29 de septiembre de 2012, 14:33 ×

Amigo la font del titulo se llama Coupe-Bold

Responder
avatar
admin
3 de noviembre de 2012, 14:49 ×

Excelente aporte Gracias me sirvio

Responder
avatar
admin
4 de febrero de 2014, 13:41 ×

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

Responder
avatar
admin
13 de abril de 2014, 11:56 ×

]]> no encuentro eso en mi codigo :_

Responder
avatar
admin
15 de abril de 2014, 9:43 ×

Jhon gracias por compartir.

Saludos

Responder
avatar
admin
15 de abril de 2014, 9:43 ×

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

Saludos

Responder
avatar
admin
15 de abril de 2014, 9:45 ×

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

Saludos

Responder
avatar
admin

Comenta y exprésate, Tu opinión es importante
Reglas para Comentar Mostrar el conversorOcultar conversor Mostrar EmoticonesOcultar Emoticones

Thanks for your comment