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.

Nuevo estilo de Entradas populares para Blogger

Pueden ver su demostración en mi blog de demos

DEMO

¡Le gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

Nuevo estilo de Entradas populares para Blogger

3 Un clic en “Editar HTML

Nuevo estilo de Entradas populares para Blogger

Ahora se le abrirá el Editor HTML de su plantilla

Nuevo estilo de Entradas populares para Blogger

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.

Nuevo estilo de Entradas populares para Blogger

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


Nuevo estilo de Entradas populares para Blogger


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

Nuevo estilo de Entradas populares para Blogger

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

Nuevo estilo de Entradas populares para Blogger

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



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.

Related post

Comentarios

5 comentarios:

  1. ¡Otro que tengo pensado usar! Mil gracias.
    Dos preguntas, ¿Se puede aplicar el efecto de zoom de ese estilo al resto de las imágenes del blog? ¿Se puede aplicar a una imagen en concreto?
    Gracias y saludos.

    ResponderEliminar
    Respuestas
    1. Hola José, este truco solo sirve para las Entradas populares, sobre el efecto del zoom solo se aplica en el Widget de Entradas populares. Y no se lo puede aplicar a una imagen en particular.

      Saludos

      Eliminar
  2. Fijate que hice todo el procedimiento a como lo pusiste en el blog. Pero lo al mome to de actualizar en el dispositivo movil no me funcionó. Algun consejo que me puedas dar. Gracias

    ResponderEliminar
    Respuestas
    1. Hola Hector, tiene que habilitar la plantilla móvil de su blog de Blogger, luego habilitar el widget popular post para que se muestre en dispositivos móviles, para ello le invito a que revise la siguiente información

      http://www.ayudadeblogger.com/2015/10/como-activar-o-desactivar-los-widgets-de-blogger-para-que-aparezcan-en-moviles.html

      Saludos.

      Eliminar