add

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ó

/*-----Entradas Populares star --------*/
.PopularPosts .item-thumbnail { display: block; height: 190px; margin: 0; overflow: hidden; position: relative; width: 100%; }
.PopularPosts .item-title { position: relative; }
.PopularPosts img { display: block; height: auto; position: absolute; width:auto; transition: all 1s ease 0s; }
.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%; }
.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;));
});
</script>

Nuevo estilo de Entradas populares para Blogger


6 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?

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

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (32) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (10) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios