Slider automático de últimas entradas para blogger



Este era un slider que tenía en la anterior plantilla de mi blog en la barra lateral derecha para mostrar las últimas entradas. Sí quieres agregarlo a tu blog sigue estos pasos:

Abrimos el panel de administración de blogger y hacemos clic en Diseño, luego en añadir un gadget >>  HTML/Javascript . En esta ventana pegaremos el siguiente código. 

<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(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/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://unestudiantedeinformatica.blogspot.com/",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Lo mas importante. Debemos ubicar la siguiente línea:   

blogURL:"http://unestudiantedeinformatica.blogspot.com/",

Y reemplazar http://unestudiantedeinformatica.blogspot.com/ por la url de tu blog.   

También sí queremos podemos editar el número de post a mostrar, el intervalo de la transición, y las medidas en pixeles del slider.

MaxPost:8,

Se mostrarán las últimas 8 entradas.

interval:5000,

El intervalo de la transición son 5000 milisegundos (5 segundos). 

ul.abt-sidebar-slider{width:100%;height:500px}

El ancho del slider se reducirá o aumentará en cuanto a un porcentaje y el alto en pixeles.

Demo del slider:





También te podría interesar:
Pop-up caja de me gusta facebook para blogger
Agregando nuestro sitio web a los buscadores google y bing
Iconos sociales color azul para blogger
Crear formulario de contacto para blogger


¡Ayúdanos a seguir creciendo, comparte en tus Redes Sociales!

Siguiente
« Prev Post
Anterior
Next Post »

10 comentarios

Click here for comentarios
Ana Turon
admin
18 de agosto de 2014, 14:13 ×

Gracias por esta maravilla! Lo puse en mis blogs

Reply
avatar
22 de agosto de 2014, 22:06 ×

De nada Ana, quedó excelente en tus blogs. Saludos.

Reply
avatar
Ana Turon
admin
24 de agosto de 2014, 18:30 ×

Gracias!! Ese día estaba con todas las pilas, de manera que le cambié el tamaño, el color de bordes y en este solo gadget combiné las entradas de cinco blogs!! Jeee...! quién diría que soy del siglo pasado..!

Reply
avatar
26 de agosto de 2014, 21:02 ×

Si, quedo muy bien adaptado a los blogs. Es una excelente idea la de combinar las entradas de varios blogs en un solo slider. Jajaja todos los días se aprende algo nuevo Ana!, saludos!.

Reply
avatar
Ana Turon
admin
18 de septiembre de 2014, 19:18 ×

Hola, Francisco! Desde hace unos días que este gadget no se ve más en mis blogs... Qué pudo pasar? juro que no toqué nada!! jaja...!

Reply
avatar
18 de septiembre de 2014, 20:12 ×

Hola Ana, al parecer el script del slider alojado en https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sidebar-slider.js fue eliminado, habría que ubicar el script abt-sidebar-slider.js y subirlo de nuevo a la nube, con dropbox nuevamete sería una opción, acá encontré un enlace de descarga del script: https://code.google.com/p/arxeio/downloads/detail?name=abt-sidebar-slider.js&can=2&q=

Reply
avatar
1 de octubre de 2014, 10:00 ×

Como hacés para poner así la parte de "Sobre el autor"?? Me interesaria tener algo parecido.
Saludos desde www.neositelinux.com.ar

Reply
avatar
Ana Turon
admin
23 de octubre de 2014, 20:56 ×

Hola, Francisco! Gracias por tu tiempo y tus explicaciones. Fui al enlace, descargué el script,lo alojé en Dropbox y reemplacé en el gadget el eliminado por este nuevo. Pero no funciona... qué hice mal?

Reply
avatar
vikko satya
admin
27 de mayo de 2015, 7:36 ×

how i make recent post and commnet like you?

Reply
avatar
Ana Turon
admin
24 de enero de 2016, 21:24 ×

Volvió a funcionar, amigo! Y me gustaría modificar el cuadrado inferior para que quede un poco más alto (así no se deformarían las imágenes). He probado mil maneras y no puedo... Si cambio el alto de todo el slider se deforma el cuadro superior... Qué me aconsejas?

Reply
avatar