SLIDESHOW DE ENTRADAS POPULARES PARA MI BLOG DE BLOGGER

SLIDESHOW DE ENTRADAS POPULARES PARA MI BLOG DE BLOGGER.

Despues de haberos enseñado como instalar en su blog de Blogger otros Widgets voy a mostraros con un slideshow manual.
hoy os voy a presentar un fabuloso Slideshow convertido con vuestras Entradas populares, que quiero decir con esto, que si utilizáis
en vuestro blog de Blogger Entradas populares, lo podéis convertir en un Slideshow y mostrar tus entradas populares de forma automática, incluye fotos, titulo y una descripción de su entrada.

 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://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(){         
                               $('#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 vosotros no etais la pata voy a mostraros aquí una imagen en la cual se puede ver como debe de quedaros al momento de realizar el paso 4 y el paso 5.

6 Un clic en Plantilla

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

8 Busca el siguiente código

featuredImage, 72

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

9 Un clic en Guardar plantilla

Ahora es momento de mirar este grandioso truco de Blogger

 Fecha de la Publicación; 06-01-2019

 Fuente; ayudadeblogger

 Publicado por;