add

Slideshow de Popular post o Entradas polulares para mi blog de blogger


Luego de haberles enseñado como instalar en su blog de Blogger 3 hermosos Slideshow en la cual podían mostrar de forma automática sus nuevas entradas o también como mostrar solo las entradas que ustedes querían mostrar con un slideshow manual, hoy les voy presentar un fabuloso Slideshow convertido en sus Entradas populares, que quiero decir con esto, que si ustedes utilizan en su blog de Blogger Entradas populares, lo pueden convertir en un Slideshow y mostrar sus entradas populares de forma automática, incluye fotos, titulo y una descripción de su entrada.

Slideshow de Popular post

Puede ver su demostración en el siguiente blog de demos


Nota importante:

Antes de empezar este tutorial, se recomienda realizar una copia de seguridad de su blog de Blogger, o primero practicar en un blog de ejemplos. Si no sabe cómo realizar una copia de seguridad de su blog, puede seguir las instrucciones del siguiente enlace:


Ayudadeblogger.com no se responsabiliza, si usted no realizo correctamente la inserción del código, para más detalles específicos, puede visitar el siguiente enlace:


También puedes ver mis publicaciones anteriores sobre tres Slideshow automaticos y uno manual.

Vamos a trabajar.

1 Ir a Blogger

2 Un clic en “Diseño



3 Añadir un Gadget, y busca “Entradas populares”, si ya tienes activado tus entradas populares, sáltate este paso.





4 Ubica el widget de tus Entradas populares en la parte superior de tu blog para que sea visible.

5 Ahora necesitaras:

"Añadir un Gadget"


Busca el widget “HTML/Javascript”, ábrelo y pega el siguiente código.



<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent{
                position:relative;
                overflow:hidden;
                border:#F4F4F4 solid 1px;
                width:892px;
                height:300px;
}
.lof-slidecontent .preload{
                height:100%;
                width:100%;
                background:#FFF;
                position:absolute;
                top:0;
                left:0;
                z-index:100000;
                color:#FFF;
                text-align:center
}
.lof-slidecontent .preload div{
                height:100%;
                width:100%;
               
                background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
}
.lof-main-outer{
                position:relative;
                height:100%;
                width:600px;
                z-index:3px;
                overflow:hidden;
                float:right;
}


/*www.ayudadeblogger.com*/
.lof-main-item-desc{
                z-index:100px;
                position:absolute;
                top:150px;
                left:50px;
                width:400px;
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

                /* filter:0.7(opacity:60) */
}
.lof-main-item-desc p{
                color:#FFF;
                margin:0 8px;
                padding:8px 0
}
.lof-main-item-desc h3 a{
                color:#FFF  !important;
                margin:0 !important;
                font-size:140% !important;
                padding:20px 8px 2px !important;
                font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif !important;
}
.lof-main-item-desc h3 a:hover{
                color:#FF6;
                text-decoration:underline;
}

ul.lof-main-wapper{
                /* margin-right:auto; */
                overflow:hidden;
                background:transparent url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/load-indicator.gif) no-repeat scroll 50% 50%;
                padding:0px;
                margin:0  !important;
                height:300px;
                width:600px;
                position:absolute;
                overflow:hidden;
}

ul.lof-main-wapper li{
                overflow:hidden;
                padding:0px  !important;
                margin:0px;
                height:100%;
                width:600px;
                float:left;
}
.lof-opacity  li{
                position:absolute;
                top:0;
                left:0;
                float:inherit;
}
ul.lof-main-wapper li img{
                padding:0px !important;            
                width:600px  !important;
                height:300px  !important;
}

.lof-main-wapper{
                               margin-left:auto;
                               margin-right:inherit;
                               clear:both;
                               height:300px;
                }


li-desc{
                z-index:100px;
                position:absolute;
                top:150px;
                left:50px;
                width:400px;
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);

                /* filter:0.7(opacity:60) */
}
li-desc p{
                color:#FFF;
                margin:0 8px;
                padding:8px 0
}
li-desc h3 a{
                color:#FFF;        
                margin:0;
                font-size:140%;
                padding:20px 8px 2px;
                font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
}
li-desc h3 a:hover{
                color:#FF6;
                text-decoration:underline;
}

/* item navigator */
ul.lof-navigator{
                top:0  ;
                padding:0  ;
                margin:0 ;
                position:absolute ;
                width:100% ;
                background:none !important;
                margin-top: 0 !important;
                margin-left: 0 !important;
                margin-right: 0 !important;
}
ul.lof-navigator li{
                cursor:hand ;
                cursor:pointer ;
                list-style:none ;
                width:100%  !important;
                padding:0  !important;
                margin:0 !important;
                overflow:hidden !important;
}
.lof-navigator-outer{
                position:absolute !important;
                z-index:100 !important;
                height:300px !important;
                width:310px  !important;
                overflow:hidden  !important;
                color:#FFF !important;
                left:0 !important
                top:0 !important;
                right:inherit !important;
}
.lof-navigator li.active{
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-bg2.gif) center right no-repeat;
                color:#FFF
}
.lof-navigator li:hover{
               
}


.lof-navigator li h3{
                color:#FFF;
                font-size:120%;
                padding:15px 0 0 !important;
                margin:0;

}
.lof-navigator li div{
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png);
                color:#FFF;
                height:100%;
                position:relative;

                padding-left:15px;
                border-top:1px solid #E1E1E1;
                margin-left:inherit;
                margin-right:18px;
}

.lof-navigator li.active div{
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/grad-bg2.gif);
                color:#FFF;

                margin-left:inherit;
                margin-right:18px;

}
.lof-navigator li img{
                height:60px;
                width:60px;
                margin:15px 15px 10px 0px;
                float:left;
                padding:3px;
                border:#C5C5C5 solid 1px;
}
.lof-navigator li.active img{
                border:##6C8E5C  solid 1px;
}
.lof-navigator li.active h3{
                color:#FFF;

.PopularPosts .item-title{0 !important; }
}
.PopularPosts .widget-item-control {display:none}

                ul.lof-main-wapper li {
                               position:relative;            
                }


</style>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/s/vq7jobq09cjangy/jquery.easing.js"></script>
<script language="javascript" type="text/javascript" src="https://dl.dropboxusercontent.com/s/2ojxzrt82ukvt8u/ayudadeblogger.slider.js"></script>
<script type="text/javascript">
 $(document).ready( function(){            
                               $('#lofslidecontent45').lofJSidernews( { interval:2000,
                                                                                                                                                                                            easing:'easeOutBounce',
                                                                                                                                                                                            duration:1200,
                                                                                                                                                                                            auto:true } );                                                                                   
                });

</script>

Una vez que hayas insertado el código dale un clic en guardar.

Nota: Para que ustedes no se confundan voy a mostrar aquí una imagen en la cual se puede ver como debe de quedarles al momento de realizar el paso 4 y el paso 5.

Slideshow de Popular post


6 Un clic en Plantilla

Slideshow con Entradas Populares

7 Un clic en “Editar HTML

Slideshow con Entradas Populares

Ahora se le abrirá el Editor HTML de su plantilla

Slideshow con Entradas Populares

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.

Slideshow con Entradas Populares

8 Busca el siguiente codigo

</body>

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

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

10 Un clic en guardar

Slideshow con Entradas Populares

Ahora es momento de mirar este grandioso truco de Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en escribir 

emailEnviar por correo

30 comentarios:

  1. Hola exelenta publicacion me encanto este arituclo sobre como cambiar mis entradas populares por un slideshow, me sirvio gracias. Luis.
    Te sigo..

    ResponderEliminar
  2. Hola Jesus Giribet, recuerda que estoy para ayudarles. Cualquier pregunta no dudes en hacermelo saber.
    Saludos.

    ResponderEliminar
  3. Mi pregunta tal vez sea un poco loca pero me gustaria que las imagenes se muestren de arriba para abajo y que se pudieran ver 3 al mismo tiempo, esto no recuerdo en que pagina lo vi pero me gusto ya que saca 2 imágenes de tu propia pagina y una de publicidad de terceros y se veía padre no se si es mucho pedir

    ResponderEliminar
    Respuestas
    1. Hola, es buena sugerencia de tu parte, lo pondre en mente, en futuros post, publicare.
      Saludos.

      Eliminar
    2. COMO USO SOLAMENTE EL DE LA PARTE DERECHA , OSEA EL QUE SE MUEVE NO ME INTERESA QUE TENGA EL FONDO

      Eliminar
  4. Hola! Tengo una pregunta. En el slideshow aparecen las 3 primeras publicaciones, pero ademas, en la pagina principal del blog me salen todas las entradas, por lo que tendria repetidas en la portada las tres primeras. ¿Cómo podria hacer para que las que se encuentran en el slideshow no aparezcan despues más abajo?

    ResponderEliminar
    Respuestas
    1. Hola eso es por que funciona con tus entradas mas pupulares, las mas vistas por tus lectores. Para eso sirve el slideshow..
      Saludos.

      Eliminar
  5. Perdón, es que mirando varios códigos, entre ellos el tuyo, logre hacer un slideshow que muestra las ultimas entradas. Sin embargo tengo el problema de duplicado. Por ejemplo, si tengo 5 entradas en total, y en el slideshow me muestra las 3 ultimas, esas tres me aparece tambien más abajo. Sabes como se podria solucionar?

    ResponderEliminar
    Respuestas
    1. Para hacer eso tienes que tulizar un slideshow que funcione por medio de Etiquetas solo asi podrás mostrar lo que tu quieras.
      Saludos.

      Eliminar
  6. Hola este slideshow lo puedo poner en una sola pagina o en un entrada ?
    NO lo quiero poner en un gadget Ayuda

    ResponderEliminar
    Respuestas
    1. Este widget funciona con las entradas populares de blogger no es posible colocarlo dentro de una entrada. Existen otros slidshow que si podras insertarlo en un post entrada, buscalos en mis tutoriales de slideshow.
      Saludos.

      Eliminar
  7. Hey amigo, excelente slideshow, me gustaría saber como hago para hacer que las diapositivas pasen más despacio,

    Un saludo

    ResponderEliminar
    Respuestas
    1. Hola, busca al final del codigo en la parte que dice interval:2000 cambia el numero 2000 por el numero 3000
      Saludos.

      Eliminar
  8. Hola, he buscado por muchos sitio, un script de entradas populares, pero por categoiras, no se que tan dificil es, y no he visto en otro lugases. ya que las entras populares de blogger, es sobre todo el contenido de esa web, pero me gustaria que lo hiciera por categoria, ejemplo: CATEGORIA DE MUSICA, aqui te pones el listado de los mas populares, .. CATEGORIA DE VIDEo aqui te podria solo las mas pupulares, y asi sucesivamente,, he buscado pero no he visto a nadie que lo tenga.. haber que me dices.. Gracias

    ResponderEliminar
    Respuestas
    1. Hola, es muy buena tu idea, pero no creo que sea posible hacerlo, ya que las entradas populares muestran las publicaciones mas vistas por los usuarios y esas son las que estan recomendadas automaticamente. Tal vez si tendo un poco mas de tiempo, veo si lo puedo hacer, pero no te lo aseguro..
      Saludos

      Eliminar
  9. Hola Luis,
    Por favor necesito tu ayuda!!!Lo primero gracias por este post pero ahora tengo un problema con el slideshow!! Quería ponerlo para mis entradas populares, lo hice siguiendo tus pasos modificando el código. Ahora quiero cambiar de plantilla y ponga la plantilla que ponga me sale este slideshow!!! No se que hacer, he probado a poner una plantilla totalmente en blanco, pero a la que quiero insertar las entradas populares me sale de nuevo este slideshow. Por favor me podrías ayudar a eliminarlo???

    ResponderEliminar
    Respuestas
    1. Hola, es facil, borra el codigo que insertaste en el widget. Eso es todo.
      Saludos.

      Eliminar
  10. Holi me encanta el slider pero cuando lo coloco en mi blog se ve la imagen cortada(solo se visuliza la parte superior) que hago para arreglarlo????

    ResponderEliminar
  11. Cuando lo coloco debajo me sale bien...Que debo hacer para que sea visible en la pàrte superior?????

    ResponderEliminar
    Respuestas
    1. Enviame la direccion tu blog para poder visualizarlo
      saludos

      Eliminar
    2. Es http://otakus-a-f-u-l-l.blogspot.com.ar/

      Eliminar
  12. Hola Luis muy buen slideshow pero quisiera ubicarlo en la columna lateral o debajo de los posteos en mi plantilla logro ubicarlo pero no puedo cambiarle el tamaño sera posible que lo adaptes? Muchas gracias un abrazo desde Tierra del Fuego Argentina.

    ResponderEliminar
  13. Excelente... Se adapta perfectamente a mi blog. Una pregunta, el valor de 1200 del final (duracion) que hace? dicho de otra manera, un valor inferior o uno más alto que efecto tendría en la velocidad de las diapositivas? Gracias y felicitaciones.

    ResponderEliminar
  14. no me funciona!!! Me sale una cosa rara, no me aparecen las imágenes. Me apetece mucho tener esto en el blog. ¿Podrías ayudarme? Un saludo
    www.estademodamarlafra.com

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog, esta cool, mira tienes un jQuery en tu blog que ya lo estas utilizando, y está creando conflictos y es por eso que no te está funcionando este truco de Blogger, ahora vuelve a realizar todo el tutorial que está publicado en este post, y solo elimina este código que se encuentra en mi tutorial: http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js una vez que lo hayas eliminado pruébalo y me avisas si te funciono. Ok. Saludos, muy Bueno tu trabajo

      Eliminar
    2. Buenas tardes, si lo deseas también puedes mostrar un carrusel de entradas recientes (últimas entradas publicadas) y configurar muchísimos parámetros:
      - número de entradas a mostrar
      - podemos ocultar o no el título del post
      - efecto transición de imágenes
      - un largo etcétera.

      Toda la info en: Carrusel de entradas recientes con imágenes para Blogger

      Eliminar
  15. Hermano, por lo general no escribo mucho en los blog, pero usted ha resuelto uno de mis deseos para mi blog,sobre todo me parece que tanto usted,como otros, que comparten su conocimiento sin esperar nada a cambio, son el nuevo ser Humanos que necesitamos para hacer de este un mundo mejor, como se dice por ahí últimamente, un Mundo mejor es posible. Pero eso si, sin egoístas que estén mandando a nuestros hijos a morir en guerras para preservar los intereses de las corporaciones transnacionales, que robar los recursos de otros países y no aportan nada, como si lo hacen ustedes.

    ResponderEliminar

Discusión

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 (33) 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 (11) 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