Gadget Entradas Populares Multicolor - Yo Bloguera

Yo Bloguera

Quieres ser Bloguero y no tienes ni idea de cómo hacerlo?

martes, 21 de noviembre de 2017

Gadget Entradas Populares Multicolor

Gadget Entradas Populares Multicolor

Gadget Entradas Populares Multicolor - En Blogger tenemos un gadget para poner en nuestro blog cual son las entradas mas visitadas.

Por defecto el aspecto de este gadget es algo parecido a esto:
Pero hay múltiples formas para que su aspecto sea distinto y más moderno o vistoso. 

La forma que os traigo hoy además es configurable desde el Diseñador de Temas, pudiendo ponerle los colores que queramos a cada columna. 

Ahora sigue estos pasos atentamente:

𝟭 - Tendremos que Editar varias veces el código HTML de nuestra plantilla de Blogger. Para eso iremos a la sección Tema y pinchamos en Editor HTML.
Editor HTML

Ahora buscaremos un trozo de código usando Control+F, se abrirá una pestaña donde ir buscando los códigos:
Buscador
Aquí en esta pantalla haremos los cambios de códigos ect que se siguen.

𝟐 - El primer código que buscamos será
Variable definitions
 Justo debajo pegamos el código
<Group description="PopularPosts Backgrounds" selector="#PopularPosts1">
<Variable name="PopularPosts.background.color1" description="background color1" type="color" default="#fa4242" value="#ff4c54"/>
<Variable name="PopularPosts.background.color2" description="background color2" type="color" default="#ee6107" value="#ff764c"/>
<Variable name="PopularPosts.background.color3" description="background color3" type="color" default="#f0f" value="#ffde4c"/>
<Variable name="PopularPosts.background.color4" description="background color4" type="color" default="#ff0" value="#c7f25f"/>
<Variable name="PopularPosts.background.color5" description="background color5" type="color" default="#0ff" value="#33c9f7"/>
</Group>
𝟑 - Ahora buscamos el código:
]]></b:skin>
 Y justo encima pegamos:
#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}
𝟒 - Ahora buscamos el código:
<b:widget id='PopularPosts1' locked='false' title='Popular Posts' type='PopularPosts'>
 Y lo borramos hasta el código:
</b:widget>
𝟓 - Donde estaba el código borrado copia el nuevo código del Gadget:
<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>
</div>
</b:includable>
</b:widget>
 𝟔 - Guardamos los cambios en Guardar Tema.

Ahora, ademas de tener el nuevo Gadget en nuestro Blog, podemos configurar sus colores desde la sección Tema, Personalizar y PopularPosts Backgrounds.
Entradas Populares Multicolor Editor

Este gadget es ideal para 5 entradas, tendrás que ponerlas desde el Editor del gadget (cambiar el 3 por 5). 

No te asustes si ves muchos pasos, leete varias veces las instrucciones e inténtalo sin miedo, pero recuerda antes de hacer nada hacer una Copia de Seguridad a tu Tema

No hay comentarios:

Publicar un comentario