Slider Automatico Para Tu Blog De Blogger

Slider Completamente Automatico Para Tu Blog De Blogger

Les voy a dejar un widget que me encanta. Puedes añadir este slider a tu Barra del lado de tu pagina principal . Solo tienes que hacer una customizacion. Este es completamente automatico solo entraras a la direccion de tu blog y lo añades el slider o deslizador se mantendra actualizando las entrdas tales como Entradas Populares, Etiquetas, Cuadro de Me Gusta etc.

.Este widget contiene un numero de efectos incluyendo por ejemplo el efecto cuando pasas el mouse sobre la foto se anima, Efecto transicion etc. Puedes cambiar el numero de imagenes . Puedes cambiar las entradas a mostrar para una etiqueta. Si deseas mostrar solo una etiqueta especifica puedes hacerlo cambiando la configuracion.

Para ver la demostracion en vivo de este widget puedes mirar en mi barra derecha de esta pagina debajo del traductor.

Para intergrarlo a tu blog solamente lo que tienes que hacer es:

Entra en Blogger → Diseño → Añadir un Widget → escoges HTML/JavaScript. Añade el codigo de abajo y dale en guardar.

<style scoped="" type="text/css">
/*
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
*/
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider{width:100%;height:500px}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPaiqQ9NjdIsrRCYAQDe99iIJKbxVJSCoeOeXivRseU3SsUKkG-gqW80Q1gj-659mnSfxcGfmbcWS239z-tLhZVwVL_QSrVEflVNbCuMhpzvAL6xZPZlhH4eE2-F-O4egxa-dLU_VngQo/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
</style>
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.ciudadblogger.info",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

blogURL = Anade la URL de tu Blog Aqui
MaxPost = El no. total de posts en el slider
Interval = Tiempo toma en cambiar los slides de posicion en millisegundos
autoplay = Escriba true o false si desea / no desea que los slides cambien automaticamente.
tagname = Si desea mostrar articulos por Etiqueta , tales como etiqueta del widget, lo escribiras como en tagname: "widget"

Nota:Si deseas que este slider o deslizador de imagenes se quede con la misma configuracion solo cambia http://www.ciudadblogger.info por la direccion de tu blog .ok

Una vez todo hecho con la configuracion guarda la plantilla. Eso es todo, un slider en la barra del lado de tu pagina se podra apreciar en tu blog de blogger..