Mostrar un Slideshow con mis entradas populares para blogger


Ahora que ya han aprendido a como instalar un Slideshow con entradas populares y con un diferente diseño, me toca presentarles otro nuevo diseño de Slideshow solo utilizando sus entradas populares. El diseño es básico e innovador, es un atractivo Slideshow que le mostrara una imagen amplia, el titulo de su post y una descripción de sus entradas. Recuerde que nuestro Slideshow lo que va a mostrar automáticamente son solo sus entradas populares.

Mostrar un Slideshow con mis entradas populares para blogger

Características del Slideshow

Muestra una imagen grande
Despliega una descripción de sus entradas
Muestra el titulo de sus entradas
El Slideshow es automático y se incorpora a sus entradas populares

Mire 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 podrás ver los diferentes diseños de Slideshow

1 Ir a Blogger

2 Un clic en “Diseño


Mostrar un Slideshow con mis entradas populares para blogger

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


Mostrar un Slideshow con mis entradas populares para blogger


Mostrar un Slideshow con mis entradas populares para blogger

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

Mostrar un Slideshow con mis entradas populares para blogger

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

Mostrar un Slideshow con mis entradas populares para blogger


<style>
@charset "utf-8";
/* CSS Document */
.lof-slidecontent, .lof-slidecontent a {
                color:#FFF;        
}
/*www.ayudadeblogger.com*/
.lof-slidecontent a.readmore{
                color:#58B1EA;
                font-size:95%;
               
}
.lof-slidecontent{
                position:relative;
                overflow:hidden;
                border:#F4F4F4 solid 1px;
}
.lof-slidecontent .preload{
                height:100%;
                width:100%;
                position:absolute;
                top:0;
                left:0;
                z-index:100000;
                text-align:center;
                background:#FFF
}
.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:800px;
                z-index:3px;
                overflow:hidden;
}


/*www.grupodelecluse.com*/
.lof-main-item-desc{
                z-index:100px;
                position:absolute;
                bottom:50px;
                left:0px;
                width:350px;
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/bg_trans.png);
                height:100px;
                /* filter:0.7(opacity:60) */
                padding:10px;
}
.lof-main-item-desc p{
                margin:0 8px;
                padding:8px 0
}
.lof-main-item-desc h3{
                padding:0;
                margin:0
}
.lof-main-item-desc h2{
                padding:0;
                margin:15px 0 0 0px;
}
.lof-main-item-desc h3 a{          
                margin:0;
                background:#C01F25;
                font-size:75%;
                padding:2px 3px;
                font-family:"Trebuchet MS",Trebuchet,Arial,Verdana,sans-serif;
                text-transform:uppercase;
                text-decoration:none
}
.lof-main-item-desc h3 a:hover{

                text-decoration:underline;
}
.lof-main-item-desc h3 i {
                font-size:70%;
}

/* main flash */
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;
                position:absolute;
                overflow:hidden;
}

ul.lof-main-wapper li{
                overflow:hidden;
                padding:0px   !important;
                margin:0px;
                float:left;
                position:relative;
}
.lof-opacity  li{
                position:absolute;
                top:0;
                left:0;
                float:inherit;
}
ul.lof-main-wapper li img{
                padding:0px  !important;           
}

/* item navigator */
.lof-navigator-wapper {
                position:absolute;
                bottom:10px;
                right:10px;
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/transparent_bg.png) repeat;
                padding:5px 0px;
}
.lof-navigator-outer{
                position:relative;
                z-index:100;
                height:180px;
                width:310px;
                overflow:hidden;
                color:#FFF;
                float:left
}
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 !important;
                cursor:pointer !important;
                list-style:none !important;
                padding:0 !important;
                margin-left:0px !important;
                overflow:hidden !important;
                float:left !important;
                display:block !important;

                text-align:center !important;

}
ul.lof-navigator li img{
                border:#666 solid 3px; 
}
ul.lof-navigator li.active img, ul.lof-navigator li:hover img {
                border:#A8A8A8 solid 3px;
}
.lof-navigator-wapper .lof-next,  .lof-navigator-wapper .lof-previous{
                display:block;
                width:22px;
                height:30px;
                color:#FFF;
                cursor:pointer;

}
.lof-navigator-wapper .lof-next {
                float:left;           
                text-indent:-999px;
                margin-right:5px;
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-l.png) no-repeat right center;
}
.lof-navigator-wapper .lof-previous {
                float:left;           
                text-indent:-999px;
                margin-left:5px;
                background:url(http://i879.photobucket.com/albums/ab351/bloggerblogimage/blogger/arrow-r.png) no-repeat left center;
}
#lofslidecontent45 {width:920px;height:360px;}
.lof-main-outer {width:920px; height:360px;}

.lof-main-wapper img {height:360px !important; width:920px !important}
.lof-navigator-wapper img {height:32px !important; width:80px !important}
</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://cdn.rawgit.com/Luis-Chavez/slideshow-jquery.easing-js/40fb47c5/.js"></script>
<script language="javascript" type="text/javascript" src="https://cdn.rawgit.com/Luis-Chavez/slideshow-ayudadeblogger.slider-js/818f44bd/.js"></script>
<script type="text/javascript">
 $(document).ready( function(){            
                               var buttons = { previous:$('#lofslidecontent45 .lof-previous') ,
                                                                                              next:$('#lofslidecontent45 .lof-next') };
                                                                                             
                               $obj = $('#lofslidecontent45').lofJSidernews( { interval : 4000,
                                                                                                                                                                                            direction: 'opacitys',      
                                                                                                                                                                                            easing: 'easeOutBounce',
                                                                                                                                                                                            duration: 1200,
                                                                                                                                                                                            auto: true,
                                                                                                                                                                                            maxItemDisplay: 4,
                                                                                                                                                                                            navPosition: 'horizontal', // horizontal
                                                                                                                                                                                            navigatorHeight: 32,
                                                                                                                                                                                            navigatorWidth: 80,
                                                                                                                                                                                            mainWidth:920,
                                                                                                                                                                                            buttons: buttons} );      
                });
</script>

Listo ahora guárdalo.

Para que no se confundan al momento de instalar este Slideshow les voy a dejar una imagen en la cual esta descrito tal como debe de quedarles, sobre el paso 4 y el paso 5.

Mostrar un Slideshow con mis entradas populares para blogger


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 código

featuredImage, 72

Imagen de ejemplo

Mostrar un Slideshow con mis entradas populares para blogger

- Cambie el número 72 por 500, tal como lo muestro en la imagen de ejemplo


Mostrar un Slideshow con mis entradas populares para blogger


9 Un clic en Guardar plantilla

Slideshow con Entradas Populares

Ahora es momento de mirar este grandioso truco de Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

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

20 comentarios:

  1. Hola, me gustaría saber si es posible modificar el ancho del slideshow para ajustarlo a mi blog. Gracias, un saludo

    ResponderEliminar
  2. Hola, es facil, cambia el numero que dice mainWidth:880 por el que se ajuste a tu gusto. Al igual en esta parte height:340px !important; width:880px cambia los dos numeros 340 es la altura y 880 es la anchura.
    Saludos.

    ResponderEliminar
  3. Ola luis buenas tardes, instale el slide en mi blog pero no se ve..podrias ayudarme http://rastamaniaonline.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. Primero, necesito saber si tienes instalado algun otro script antes de que hayas instalado el codigo en el widget, ya que si tienes instalado algun escript en el codigo de blog, esto hara que no se muestre el slideshow basado en popular post.
      Saludos.

      Eliminar
  4. Cordial saludo,
    Luis mira, ayer intente instalar el SLIDER que es automático de entradas populares con imagen grande y descripción del lado izquierdo y con las entradas rodando al lado derecho. Pero en mi Blog no rueda se queda trabado, no anda. En mi Blog de Pruebas Solamente muestra una entrada y tampoco anda. HOY trate de instalar este SLIDER que también esta muy bonito y es automático con las entradas populares PERO NO LO MUESTRA se queda todo el espacio en blanco y como pensando y no lo muestra.Lo instale en mi Blog de pruebas y lo muestra pero solamente una entrada y no rueda, no anda.Es el mismo caso del día anterior.
    Estuve mirando lo que ocurre con otros alumnos tuyos y tal vez sea el caso de Rastamania y lo que tu le dijiste entonces me puse a buscar y encontre uno de java script.


    Sera por eso que a mi no me han funcionado? Que puedo hacer? por favor regalame algo de tu tiempo. Llevo desde Diciembre tratando de montarle un SLIDER a mi blog y no lo he conseguido.Y los de tu pagina me gustan mucho.(tambien tengo un slider de ¨wow slider¨ funcionando en una carpeta en mi PC pero no lo he podido instalar).

    Blog de pruebas: http://ecologiayactualidadinteranimal.blogspot.com/
    Blog para el que seria el SLider: http://ecologiayactualidadinternacional.blogspot.com/

    Voy a dejar en el blog de pruebas el Slider un par de días para que puedas ver que efectivamente no rueda.

    Luis espero me puedas ayudar.
    En lo que yo te pueda ayudar estoy a la orden.

    ResponderEliminar
    Respuestas
    1. Hola, agregame al chat de Gmail para poderte ayudar directamente esta es mi direccion: ayudadeblogger@gmail.com
      Cuando estes conectado gustosamente te ayudare a que funcione este slider en tu blog.
      Saludos.

      Eliminar
    2. Hola Luis cordial saludo,
      Ya te agregue aparezco como Dario Acosta ya te envie varias llamadas al chat.
      Acabo de intentar nuevamente el SLIDER pero definitivamente no sale....Carga toda la pagina pero en el espacio del Slider sale en blanco y en el centro como pensando y no lo carga.

      Eliminar
    3. Ok, espera mi mensaje en el chat o cuando me veas conectado podemos realizar este truco.
      Saludos.

      Eliminar
  5. Respuestas
    1. Hola, solo debes copiar el codigo tal como esta en mi post y no cambiar nada, si aun no te sale te puedo ayudar directamente.
      Saludos.

      Eliminar
  6. Buenas amigo. ME ha gustado este Script. El Cual modifique a la medida de mi blog. Pero tengo una pregunta.. Como hago para q cuando abra alguna entrada se quite el Slide y abra solo la entrada la cual seleccione..?

    ResponderEliminar
    Respuestas
    1. Hola es un truco muy facil, primero necesito que me envies la direccion te tu blog, con eso te podr indicar donde color el script.
      Saludos.

      Eliminar
  7. Hl luis cordial saludos
    la presente es para imformarte que este script no se adapta
    al tamaño de mis entradas populares ques d 310 de ancho
    necesito ayuda porfa!!
    Email: magallo1973@gmail.com

    ResponderEliminar
  8. Eres un mostro lo único que te preguntaría una cosa para no joderlo, me gustaría ponerle un fondo negro me podrías decir donde lo toco es que soy un poco torpe y solamente para meterlo en 450 width me costo dios y ayuda pero te doy las gracias por este trabajo fino fino

    ResponderEliminar
  9. Tambien me gustaría que se quite cuando se abra el post mi pagina es http://la-opinion-deportiva.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Para ocultar widgets sigue las instrucciones de este post: http://www.ayudadeblogger.com/2013/09/como-ocultar-widgets-en-pagina-principal-entradas-de-blogger.html
      Saludos.

      Eliminar
  10. Muchas gracias por tutorial, pero me gustaría preguntarte sobre un asunto particular:

    En mi caso tengo dos gadgets de entradas populares (una de los últimos 30 días y otra con las entradas más vistas desde siempre). Cuando coloco el slide, se interfieren ambas entre sí. ¿Hay algún modo de evitarlo?

    En realidad me gustaría poner el slide con las entradas populares de los últimos 30 días y dejar la otra como "gadget normal".

    Un saludo y gracias

    ResponderEliminar
    Respuestas
    1. Hola, no es posible realizarlo, necesitas escoger o pones el codigo o lo dejas tal como esta..
      Saludos.

      Eliminar
  11. me sirvio mucho para la plantilla movil,
    ¿pero que se cambia para que el script tome una version de la imagen mas grande?
    ayuda porfa

    ResponderEliminar
  12. - Para mostrar una imagen de mejor calidad. buscar:
    resizeImage(data:post.featuredImage, 300,
    -y reemplazar el 72 por 300 o mayor, aqui explican el sistema que usa blogger para tener varias versiones de una misma imagen http://www.oloblogger.com/2012/02/la-ventaja-de-subir-una-sola-imagen-y.html

    -Gracias por el Slider XD

    ResponderEliminar