Nuevo estilo de Entradas populares para Blogger

¿Necesito un nuevo estilo totalmente diferente de las Entradas populares de mi blog de Blogger? Cambiar el aspecto de sus Entradas populares por un estilo totalmente renovado es lo que aprenderás en este tutorial de Blogger. Para cambiar a una forma diferente nuestras Entradas populares tenemos que insertar dos códigos en secciones diferentes de nuestra Plantilla, es un truco muy fácil de realizarlo, en este tutorial de Blogger le enseñare como hacerlo.

Pueden ver su demostración en mi blog de demos

¡Le gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla”

3 Un clic en “Editar HTML”

Ahora se le abrirá el Editor HTML de su plantilla

En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.

4 Busca este código

]]></b:skin>

Ingrese el siguiente código CSS justo arriba del código que encontró

/* Custom CSS for Blogger Popular Post Widget */

.PopularPosts ul,

.PopularPosts li.PopularPosts li a {

  margin:0 0;

  padding:0 0;

  list-style:none;

  border:none;

  background:none;

 }

.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }

.PopularPosts .item-title { position: relative; }

.PopularPosts img {

    transition: all 1s ease 0s;

    width: 100%;

    height: 100%;

    object-fit: cover;

}

.item-title a { background:rgba(0, 0, 0, 0.35); color: #FFFFFF; font-family: Impact; font-size: 17px; font-weight: 100; padding: 10px 0; position: absolute; right: 0; text-align: center; top: 30px; width: 100%; }

.item-snippet {

    background: rgba(0, 0, 0, 0.35);

    color: #FFFFFF;

    font-weight: 900;

    left: 12%;

    padding: 10px;

    position: absolute;

    text-align: center;

    top: 95px;

    width: 70%;

    line-height: 16px;

}

.item-content:hover img {transform: rotate(10deg) scale(1.2);}

.item-content { position: relative; }

5 Busca este código

</body>

Ingrese las siguientes líneas de código justo arriba del código que encontró

<script src='//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js'/>

<script type='text/javascript'>

$(&#39;.popular-posts img&#39;).attr(&#39;src&#39;, function(e, t) {

return t.replace(&#39;/w72-h72-p-nu/&#39;, &#39;/s350-c/&#39;)

});

$(&#39;.popular-posts ul li .item-snippet&#39;).each(function(){

var txt=$(this).text().substr(0,60);

var j=txt.lastIndexOf(&#39; &#39;);

if(j&gt;10)

$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));

});

$(&#39;.popular-posts ul li .item-content a&#39;).each(function(){

var txt=$(this).text().substr(0,60);

var j=txt.lastIndexOf(&#39; &#39;);

if(j&gt;=6)

$(this).text(txt.substr(0,j).replace(/[?,!\.-:;]*$/,&#39;...&#39;));

});

6 Ahora necesita aumentar un valor, cambiar 72 por 300, para ello siga las instrucciones del siguiente video tutorial

7 Un clic en “Guardar plantilla”

Mire en su blog de Blogger como cambio el aspecto del widget Entradas populares

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Más sobre Entradas populares:

1. Cambiar mis Entradas Populares de forma Horizontal
2. Como cambiar de estilo a mis Entradas Populares
3. Como cambiar de estilos a mis Entradas Populares de blogger
4. Entradas Populares convertidas en imágenes 3D
5. Entradas Populares para blogger nuevos estilos
6. Entradas populares de Blogger nuevo estilo
7. Entradas populares para Blogger estilo diferente
8. Mostrar un Slideshow con mis entradas populares para blogger
9. Nuevo estilos de imágenes de entradas populares para blogger
10. Nuevos estilos Entradas populares para blogger
11. Slideshow con Entradas Populares Nuevo estilo
12. Slideshow de Popular post o Entradas polulares para mi blog de blogger
13. Widget Entradas populares de Blogger en Horizontal
14. Widget para blogger, Slideshow con Entradas Populares
15. ¿Cómo cambiar de estilos a mis Entradas populares de mi blog Blogger?

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Entradas Populares

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.