Divisor

Éste sitio web usa cookies, puedes ver la política de cookies, Aquí. ⤵ ⤵


Gadget de posts populares con barras de colores







El efecto del que voy hablar hoy, consiste en un gadget que tenia insertado en mi blog, y que está en la sidebar de mi blog de pruebas, como podéis visualizar en la sección de posts populares de dicho blog, me han preguntado por él, y me he puesto a ello, para hacer un tutorial, para que podáis implantar este gadget en vuestro blog de Blogger. El efecto del que hablo, consiste en transformar el gadget de entradas populares por unas barras gruesas de distintos colores, con el título de la entrada y una pequeña miniatura, sí queréis que se vea, es opcional. Alucinaréis en colores, vaís a flipar, espero que os guste.




Demo!




Un paso previo sería eliminar por completo el gadget de posts populares, en el caso de que lo tuviéramos instalado. Se podría sustituir por el que veremos más adelante, pero creo que es más fácil así. Sin miedo, que si no os sale este tutorial -que os saldrá- o no os gusta una vez puesto, con añadirlo de nuevo estará todo solucionado. No os preocupéis. Ahora sigue las pautas seguidamente, qué ves:



  • El primer paso es ir a Blogger después ir a plantilla y Editar Html
  • El segundo paso es establecer un copia de seguridad por si las moscas
  • El tercer paso, es copiar después de buscar el siguiente tag, en tu plantilla de Blogger, busca  la etiqueta siguiente (para buscar más rápido la etiqueta, usa las teclas Ctrl+F de tu PC) añadiremos unas variables en la plantilla de blogger, para poder usar el diseñador de plantillas, para poder cambiar el color de las barras rápidamente y personalizarlas:


/* Variable definitions====================



  • Ahora justo después del anterior código encontrado, pega el siguiente código, este código es para las últimas versiones de Blogger:


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


  • Para las plantillas anteriores (no las clásicas), sería este otro y la diferencia es que no nos saldrían todos los colores en la misma opción del menú, cuando accedemos al diseñador de plantillas, y eligir el color:


<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 viene el cuarto paso, que es el siguiente, debemos colocar los estilos del gadget, y lo colocaremos antes de ]]></b:skin>:


#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;}


  • Luego, viene el quinto paso, que es el siguiente, debes de buscar en tu plantilla o localizar un b:widget para insertar el nuevo artilugio. Localiza en tu plantilla las líneas que vienen a continuación, lo debes de colocar en la b:section de la sidebar, cómo está resaltado en el código, como ves:


<b:section-contents id='sidebar-right-1'>

COLOCAR AQUÍ El CÓDIGO QUE VENDRÁ DESPUÉS PARA QUE SALGA PRIMERO

<b:widget id='BlogArchive1' locked='false' title='Archivo del blog' type='BlogArchive'/>

TAMBIÉN PODRÍA IR AQUÍ

<b:widget id='Profile1' locked='false' title='Datos personales' type='Profile'/>

O AQUÍ


  • Sexto paso y último, este es el código que habría que insertar en ese lugar, en ese lugar me refiero al código anterior, resaltado en blanco:


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



  • Guardamos y ya tenemos nuestras coloridas barras a falta de ajustes.

  • Ahora añadiremos el Gadget de posts populares y seleccionaremos el número correcto de entradas a mostrar para lo cual editamos el gadget, bien desde Diseño, o bien con el icono de edición rápida y marcamos Mostrar un máximo de 5 entrada(s), tantas como colores hemos definido con los anteriores códigos que hemos mostrado anteriormente. 

  • Por último, si queremos cambiar los colores de cada barra sólo habrá que acudir al Diseñador de Plantillas, cómo se ve en la imagen.







Aizum Blog, viernes, mayo 03, 2013


Divisor Star

✏ Buscador!

En las redes ⤵

✏ Vídeos!

 

Publicidad!

Subir hacia arriba ▲ Modificated & Designed by Iván Dangerfield © 2014. Converted by Bloggertheme9