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!

☑ Puede que también te interese:

crea tu blog gratis
imagen pixelada o borrosa en el blog
Personalizar el Blockquote o Texto Citado

Gabriela Laya

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

Deja un comentario

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

Pasando Página Blog:

Hola, Gabriela. Muchas gracias por el post, las entradas populares ayudan mucho a tener más visibilidad, ¡un beso!

Responder
    Gabriela Laya:

    Hola Pasando Página: Así es, aunque en algunos casos quizás no sean necesarios *el mio* prefiero colocar entradas relacionas XD

    Responder
Citu:

Gracias por el tutorial, te mando un beso

Responder
    Gabriela Laya:

    Hola citu: De nada 🙂

    Responder
Maria Eugenia ARIAS LOZANO:

Al principio si que tenía yo lo de las entradas populares… luego ya dije, cuanto menos mejor ajajaj. Un besazo…

Responder
    Gabriela Laya:

    Hola Maria: te entiendo yo tambien lo llegue a usar, creo que depende de la persona.

    Responder
Asunción Artal:

Yo lo tengo, me parece muy interesante para los visitantes nuevos. Un beso

Responder
    Gabriela Laya:

    Hola Asunción Artal: Así es, para que tengan una idea de lo que ofreces 🙂

    Responder
yo leo Novela:

Pero qué bien me vienen todos tus consejos.
Te mando un besazo. ¡Muaca!

Responder
    Gabriela Laya:

    Hola yo leo Novela: Me alegro que te sean útiles 🙂

    Responder
Nayade:

¡Me encantó este post!
Lo tendré en cuenta para hacerlo en mi blog
Un besazo grande ♥

– – El Mundo de Naya – –

Responder
    Gabriela Laya:

    Hola Nayade: Cuando quieras 🙂

    Responder
Sakuya Aikawa:

(ノ◕ヮ◕)ノ*:・゚✧ Holaaa!!!
me recontra encanto esta entrada, justamente quiero cambiar la plantilla de mi blog porque la que tengo ya lleva mucho tiempo jajaja
amiga consulta ¿Tú sabes como puedo colocar mis entradas en cajitas así como en las plantillas dinámicas de blogger? hace mucho rato que quiero saber como hacerlo y aunque encontré un blog que enseña pues no me resulta porque me falta un codigo que mi plantilla no tiene, también baje una plantilla que me encantó y la estoy re-editando para poder usarla que viene con las cajitas listas pero hay algo que me descompensa cuando la veo y es que si se supone que tengo la opción mostrar 10 entradas en mi blog solo me sale una o 3 cajas cuando deberían salir 10 por página ¿Tú sabes como puedo solucionar eso?

Te dejo la muestra de mi blog de pruebas https://sakusekai2.blogspot.com/
Visita mi blog ♥ 穛 S4Ku SEK4i®

Responder
    Gabriela Laya:

    Hola Sakuya Aikawa: Me alegro que te guste 🙂 respondiendo a tus preguntas:

    ¿Tú sabes como puedo colocar mis entradas en cajitas así como en las plantillas dinámicas de blogger?
    Si lo se, pero debes saber de código por lo menos HTML y CSS mmmm si veo que no es tan complicado de explicar puede que lo explique en un futuro XD

    se supone que tengo la opción mostrar 10 entradas en mi blog solo me sale una o 3 entradas:
    Ya he explicado la solución aquí te dejo: No Aparecen Todas las Entradas en mi Blog 【Solución Blogger】

    PD: Me encanta tu plantilla *ya la vi* y esta muy hermosa, me recuerdas a mi cuando re-editaba las plantillas porque no sabia hacer una por mi propia cuenta, has pensado en estudiar ¿Diseño web? porque veo en ti lo que yo hacia y ahora hago 🙂

    Responder
Carolina G. Ticala:

Very interesting post! ✔️✔️✔️ Have a great day my friend! 💮💮💮

Responder
    Gabriela Laya:

    Hello Carolina G. Ticala: Thank you 🙂

    Responder
Serena Miles:

hola,
pues yo no uso Entradas populares, pero quizas me lo plantee.
Gracias por el post
Besotessssssssss
#pasamosaFase3

Responder
    Gabriela Laya:

    Hola Serena Miles: Tampoco es que sea obligatorio solo úsalo cuando sea necesario

    Responder
El desvan de vicensi:

Como siempre muy buenos consejos Gabriela. A ver cuando nos hablas sobre el de entradas relacionadas. Un beso y feliz noche 🌈🌈🌈

Responder
    Gabriela Laya:

    Hola El desvan de vicensi: Si otra entrada que la tendré pendiente 😛

    Responder
Rocío:

¡Muchas gracias por todo lo que nos enseñas!
Un abrazo.

Responder
    Gabriela Laya:

    Hola Rocío: De nada 🙂

    Responder
Joanna:

Muy útil, como siempre. 🙂

Besos

Responder
    Gabriela Laya:

    Joanna: Gracias 🙂

    Responder
Lecturas de Annie:

Hola!
Un post súper útil!
Voy a ver si me animo a meterle mano a la plantilla para cambiar el estilo del gadget.
Un beso

Responder
    Gabriela Laya:

    Lecturas de Annie: jajaja cuando quieras 🙂

    Responder
Sakuya Aikawa:

Gabriela, pues lo he pensado un montón de veces de hecho no en diseño web específicamente si no en programación, pero el diseño gráfico ya me dejo con mucho trauma jajajajajajaj.

Responder
    Gabriela Laya:

    Hola Sakuya Aikawa: again jajaja yo comencé haciendo cursos, de programación (pero me di cuenta que mi lógica es básica XD) y me gusto más el diseño, así que hice curso de diseño web y gráfico por lo menos para tener una idea de la rama.

    Responder
Yomi MR:

Holaa, aah, este gadget me encanta un montón y ya estoy pensando en moverle un poquis 😛
¡Besos! :3

Responder