Slider de imágenes con las entradas recientes de vuestro blog (picture slider recent entries)

Slider de imágenes con las entradas recientes de vuestro blog

Colocar un Slider de imágenes que va cambiando automáticamente con las entradas recientes que hemos hecho en nuestro blog es muy fácil, queda muy bien y es muy sencillo de colocar.



CODIGO:

<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/AVvXsEgytWadJaUf5qkhowh-gSySWnWztn5n5ESPBU1QJ_25X_eSRb4EMPFQmR-VBzeZ2OqLYc0jm1MONwHJ993e5DJHvIq2qAY-TVfSuMTHKmlCVpFJn6xnDbhyphenhyphenFF9uxM9ZB1iBPe7QKHDtnms/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:70%}

ul.abt-sidebar-slider li:nth-child(3) .autname,ul.abt-sidebar-slider li:nth-child(4) .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://tutorialescomofunciona.blogspot.com.es/",

MaxPost:8,

idcontaint:"#featuredpostside",

ImageSize:300,

interval:5000,

autoplay:true,

tagName:false

});

//]]>

</script>

Copiamos el código y

Como siempre vamos a DISEÑO -->Añadir un GADGET --> HTML/Javascrip 
y lo pegamos. GUARDAR
A continuación hay que cambiar un par de cosas, donde pone en rojo size :70%.
Este valor es el que justifica el tamaño de la fuente para que no se pisen los títulos de las entradas con la fecha y el nombre en el slider, por lo tanto jugar con el porcentaje hasta que  quede estéticamente bien.
Y Donde pone  blogURL:="http://tutorialescomofunciona.blogspot.com.es",

Lo que esta en rojo debéis de sustituirlo por vuestra URL.