Entradas Populares en Blogger: Responsive

En este post te enseño a modificar el gadget de las Entradas Populares en Blogger con la intención de que sea más interactivo y llamativo, en tan solo 3 pasos. Recuerda que puedes modificarlo a tu gusto, en el vídeo tutorial te explico como hacerlo.

¡Hola! Bienvenido a Peengler, soy Gabriela. Aquí te dejo un mini tutorial super sencillo para que cambies el estilo de tus entradas populares de manera fácil. Te recomiendo ver el vídeo porque hay ciertos errores que quizás te pueda pasar y que mejor que saber como solucionarlo.

Sin más que decir, ¡empecemos!

Video tutorial: Entradas Populares en Blogger

Entradas Populares en Blogger

Clic en la imagen para ver el vídeo en YouTube

Añadir el gadget: Entradas Populares

Debes ir a Diseño > Añadir gadget > Entradas populares

Luego configuralo. Te recomiendo que desactives el Fragmento.

Añadir los estilos a las Entradas Populares en Blogger

Debes ir a Tema > HTML > CTRL + F y buscas: ]]></b:skin>

Luego encima de este, pegas lo siguiente:

CSS

/*Popular Post - peengler.com*/
#PopularPosts2{width:100%}
.PopularPosts .widget-content ul{width:100%;padding:0;list-style-type:none;counter-reset:popcount}
.PopularPosts .widget-content ul li{width: 100% !important;padding:0;height:180px;overflow:hidden;position:relative;width:calc(50% - 5px);float:left;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;margin-top: 10px;}
.PopularPosts .widget-content ul li a{color:#fff;text-decoration:none;font-size:16px;font-weight:500;}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0}
.PopularPosts .widget-content ul li:hover img{-webkit-transform: scale(1.3);-ms-transform: scale(1.3);-o-transform: scale(1.3);transform: scale(1.3);}
.PopularPosts .widget-content ul li img{width:100%;height:180px;padding-right:0;transition:all .6s ease-in-out;}
.PopularPosts .item-thumbnail{float:none;margin:0 0 -4px}
.PopularPosts .item-title{padding:5px;position:absolute;bottom:0px;left:0;right:0;text-align:left;background:rgba(0,0,0,.5);transition:all .3s ease-in-out;line-height: 1.3;letter-spacing: 0.5px;}
.PopularPosts .item-thumbnail:before{content:none}
.PopularPosts .widget-content ul li:hover .item-title a{color:#fff}
.PopularPosts .widget-content ul li:hover .item-title{bottom:0px;background:#000}
.PopularPosts .item-snippet{display:none}
/* Fin Popular Post - peengler.com*/

Guardas los cambios, Actualiza tu blog, si de casualidad todo marcha bien, entonces ya terminaste 😀

ERROR: Las imágenes se ven muy feas (pixeladas): Esto se debe que las imágenes están configuradas con una resolución pequeña, sino me equivoco de unos 72 en resolución, ahora debes configurarlo a 300.

Para eso debes ver el vídeo tutorial, que esta al comienzo de la entrada.

Modificar el gadget de Entradas Populares

Si en tu caso, quieres añadir/reemplazar el gadget entonces debes ver el vídeo porque te enseño a buscarlo y como hacer el proceso correctamente.

Cuando lo encuentres reemplázalo por:

HTML

<b:widget id='PopularPosts2' locked='false' title='Entradas populares' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != &quot;&quot;'><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'>
<b:if cond='!data:showSnippets'>
<!-- (1) No snippet/thumbnail -->
<a expr:href='data:post.href'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
<b:else/>
<!-- (3) Show only thumbnails or (4) Snippets and thumbnails. -->
<div expr:class='data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 300,) : data:post.thumbnail' var='image'>
<img expr:alt='data:post.title' expr:src='data:image' expr:title='data:post.title' height='170' width='300'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<b:if cond='data:showSnippets'>
<div class='item-snippet'><data:post.snippet/></div>
</b:if>
</div>
<div style='clear: both;'/>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
</b:widget>

Guardas los cambios y listo.

En conclusión:

Las Entradas Populares en Blogger son muy importantes para llamar la atención de tus visitantes para que sigan leyendo más artículos de tu blog. Aunque personalmente prefiero usar las Entradas Relacionadas que se suelen colocar al final de cada entrada.

Lo más probable es que siga subiendo más sobre este gadget de las Entradas Populares, pero con otro estilo y por supuesto, que se adapte a cualquier dispositivo.

¿Qué te ha parecido este post?

¿Te gusto el post?
¡Compártelo!
Gabriela Laya

Gabriela Laya

Me gusta el Diseño Web, Crear plantillas para Wordpress y Blogger y todo lo relacionado a estas 2 plataformas de Blogs.