Slider automático para mostrar las ultimas entradas en blog de blogger

Tomado gentilmente de Ciudad Blogger

Hoy les traigo un excelente Slider para sus blogs de Blogger se trata de un slider hecho con Jquery y que con su adaptación ha quedado programado para que muestre las ultimas entradas del blog automáticamente:

Mira un DEMO del Slider trabajando aquí:

 
 Bueno el Slide es el que tenemos puesto en  nuestro blog el que vez así con esos bonitos efectos ese es bueno para añadirlo sigue estos pasos:

Entra en la Edición HTML, y antes de ]]></b:skin> agrega los estilos:

/* Easy Slider (Automático)

-------------------------------------------------------------------- */

#slide-container {

width:480px;

height:320px;

position:relative;

}

#slider {

width:480px;

height:320px;

left:25px;

overflow-x:hidden;

overflow-y:hidden;

position:relative;

}

.slide-desc {

background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgok1ukLqteJwyaoAHkx60DL6LEnDJHLfpc3baIIIBdpRo4TsNO8-FqwRvupplK7qT4LuN6xomOjuhloMCEA633w2l_ohh1aYR7Jr5OyHzcEHOwk_y5VicOr0dm8U6OhF8e0B0S-ltMCUw/s30/bgtransparent.png) repeat scroll 0 0;

color:#FFFFFF;

padding:10px;

position:absolute;

text-align:left;

bottom:0;

width:100%;

z-index:99999;

}

.slide-desc h2{

display:block;

color:#f2f2f2;

font-size:14px;

}

.crosscol .widget-content {position:relative;}

#slider ul, #slider li {

margin:0;

padding:0;

list-style:none;

}

#slider li {

width:480px;

height:320px;

overflow:hidden;

}

#prevBtn, #nextBtn {

display:block;

width:30px;

height:77px;

position:absolute;

left:-30px;

text-indent:-9999px;

top:71px;

z-index:1000;

}

#nextBtn {

left:500px !important;

}

#prevBtn, #nextBtn {

display:block;

left:0;

position:absolute;

top:132px;

width:30px;

height:77px;

z-index:1000;

}

#prevBtn a, #nextBtn a {

display:block;

position:relative;

width:30px;

height:77px;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrHrivLxqnp4ZU_dIcvgrk_5Sip0f1CyGnQYb-Qrhu1vxyt8vdaPi6rCi9kyPzpxT_88CvryEbOGVW4p5WR7ys2UBfgY-J5rzAPpDOS_UNhAWyDayCDdItC6d8mK4XfytfWLGO45QXRks/s77/flecha-prev.png) no-repeat 0 0;

}

#nextBtn a {

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjXFHsyCgg9uT1DNd0_wGMq3soaCozqeUqxNdYzwAJ2d6sJn3KNoFVSLcX-o1SNrcKECsFM3xEsyvmHtpkX-xmeAXX-lLAx9lqE0G2GQT4Jgv4tdDgwZ9ys-B3iLt-qRreQM1HA1vQgl3w/s77/flecha-next.png) no-repeat 0 0;

}

/* Estilos de los números */

ol#controls{

margin:8px 25px;

padding:0;

height:28px;

}

ol#controls li{

margin:0 4px 0 0;

padding:0;

float:left;

list-style:none;

height:28px;

line-height:28px;

}

ol#controls li a{

float:left;

height:28px;

line-height:28px;

border:1px solid #000; /* Borde de los números */

background:#0B243B; /* Color de fondo de los números */

color:#fff; /* Color de los números */

padding:0 10px;

text-decoration:none;

}

ol#controls li.current a{

background:#5DC9E1; /* Color de fondo del número activo */

color:#fff; /* Color del número activo */

}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}

Ahora antes de </head> copia y agrega este script:

<script>

//<![CDATA[

var showpostthumbnails_gal = true;

var showpostsummary_gal = true;

var random_posts = false;

var numchars_gal = 150;

var numposts_gal = 10;

function showgalleryposts(json) {

var numPosts = json.feed.openSearch$totalResults.$t;

var indexPosts = new Array();

document.write('<ul>');

for (var i = 0; i < numPosts; ++i) {

indexPosts[i] = i;

}

if (random_posts == true){

indexPosts.sort(function() {return 0.5 - Math.random()});

}

if (numposts_gal > numPosts) {

numposts_gal = numPosts;

}

for (i = 0; i < numposts_gal; ++i) {

var entry_gal = json.feed.entry[indexPosts[i]];

var posttitle_gal = entry_gal.title.$t;

for (var k = 0; k < entry_gal.link.length; k++) {

if ( entry_gal.link[k].rel == 'alternate') {

posturl_gal = entry_gal.link[k].href;

break;

}

}

if ("content" in entry_gal) {

var postcontent_gal = entry_gal.content.$t

}

s = postcontent_gal;

a = s.indexOf("<img");

b = s.indexOf("src=\"", a);

c = s.indexOf("\"", b + 5);

d = s.substr(b + 5, c - b - 5);

if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {

var thumburl_gal = d

} else var thumburl_gal = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxP4c2picxFwpBNRyMrTi-MBXj7mxEmrb5RVDdaECSYkxAgr-ArdJVn8ww0eE4hcc3FToKEYst_5ZzvQTrZJG449WDF89HMwgeck8b9H-gI0MRlDXpA1QcIPjuws9_WQ8pRjLSK628_e0/s0/sin-imagen.png';

document.write('<li><div id="slide-container"><span class="slide-desc"><h2 style="margin:10px 0px;">');

document.write(posttitle_gal + '</h2>');

var re = /<\S[^>]*>/g;

postcontent_gal = postcontent_gal.replace(re, "");

if (showpostsummary_gal == true) {

if (postcontent_gal.length < numchars_gal) {

document.write(postcontent_gal);

document.write('</span>')

} else {

postcontent_gal = postcontent_gal.substring(0, numchars_gal);

var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");

postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);

document.write(postcontent_gal + '...');

document.write('</span>')

}

}

document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="480px" height="320"/></a></div>');

document.write('</li>');

}

document.write('</ul>');

}

//]]>

</script>

Lo siguiente será pegar antes de </body> este script:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<script type='text/javascript'>

//<![CDATA[

/*

* Easy Slider 2.2.2 - jQuery plugin

* written by Alen Grakalic 

* http://cssglobe.com/post/4004/easy-slider-15-the-easiest-jquery-plugin-for-sliding

* Copyright (c) 2009 Alen Grakalic (http://cssglobe.com)

*/

(function($){$.fn.easySlider=function(options){var defaults={prevId:'prevBtn',prevText:'Previous',nextId:'nextBtn',nextText:'Next',controlsShow:true,controlsBefore:'',controlsAfter:'',controlsFade:true,firstId:'firstBtn',firstText:'First',firstShow:false,lastId:'lastBtn',lastText:'Last',lastShow:false,vertical:false,speed:800,auto:false,pause:5000,continuous:false,numeric:false,numericId:'controls'};var options=$.extend(defaults,options);this.each(function(){var obj=$(this);var s=$("li",obj).length;var w=$("li",obj).width();var h=$("li",obj).height();var clickable=true;obj.width(w);obj.height(h);obj.css("overflow","hidden");var ts=s-1;var t=0;$("ul",obj).css('width',s*w);if(options.continuous){$("ul",obj).prepend($("ul li:last-child",obj).clone().css("margin-left","-"+w+"px"));$("ul",obj).append($("ul li:nth-child(2)",obj).clone());$("ul",obj).css('width',(s+1)*w)};if(!options.vertical)$("li",obj).css('float','left');if(options.controlsShow){var html=options.controlsBefore;if(options.numeric){html+='<ol id="'+options.numericId+'"></ol>'}else{if(options.firstShow)html+='<span id="'+options.firstId+'"><a href=\"javascript:void(0);\">'+options.firstText+'</a></span>';html+=' <span id="'+options.prevId+'"><a href=\"javascript:void(0);\">'+options.prevText+'</a></span>';html+=' <span id="'+options.nextId+'"><a href=\"javascript:void(0);\">'+options.nextText+'</a></span>';if(options.lastShow)html+=' <span id="'+options.lastId+'"><a href=\"javascript:void(0);\">'+options.lastText+'</a></span>'};html+=options.controlsAfter;$(obj).after(html)};if(options.numeric){for(var i=0;i<s;i++){$(document.createElement("li")).attr('id',options.numericId+(i+1)).html('<a rel='+i+' href=\"javascript:void(0);\">'+(i+1)+'</a>').appendTo($("#"+options.numericId)).click(function(){animate($("a",$(this)).attr('rel'),true)})}}else{$("a","#"+options.nextId).click(function(){animate("next",true)});$("a","#"+options.prevId).click(function(){animate("prev",true)});$("a","#"+options.firstId).click(function(){animate("first",true)});$("a","#"+options.lastId).click(function(){animate("last",true)})};function setCurrent(i){i=parseInt(i)+1;$("li","#"+options.numericId).removeClass("current");$("li#"+options.numericId+i).addClass("current")};function adjust(){if(t>ts)t=0;if(t<0)t=ts;if(!options.vertical){$("ul",obj).css("margin-left",(t*w*-1))}else{$("ul",obj).css("margin-left",(t*h*-1))}clickable=true;if(options.numeric)setCurrent(t)};function animate(dir,clicked){if(clickable){clickable=false;var ot=t;switch(dir){case"next":t=(ot>=ts)?(options.continuous?t+1:ts):t+1;break;case"prev":t=(t<=0)?(options.continuous?t-1:0):t-1;break;case"first":t=0;break;case"last":t=ts;break;default:t=dir;break};var diff=Math.abs(ot-t);var speed=diff*options.speed;if(!options.vertical){p=(t*w*-1);$("ul",obj).animate({marginLeft:p},{queue:false,duration:speed,complete:adjust})}else{p=(t*h*-1);$("ul",obj).animate({marginTop:p},{queue:false,duration:speed,complete:adjust})};if(!options.continuous&&options.controlsFade){if(t==ts){$("a","#"+options.nextId).hide();$("a","#"+options.lastId).hide()}else{$("a","#"+options.nextId).show();$("a","#"+options.lastId).show()};if(t==0){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}else{$("a","#"+options.prevId).show();$("a","#"+options.firstId).show()}};if(clicked)clearTimeout(timeout);if(options.auto&&dir=="next"&&!clicked){;timeout=setTimeout(function(){animate("next",false)},diff*options.speed+options.pause)}}};var timeout;if(options.auto){;timeout=setTimeout(function(){animate("next",false)},options.pause)};if(options.numeric)setCurrent(0);if(!options.continuous&&options.controlsFade){$("a","#"+options.prevId).hide();$("a","#"+options.firstId).hide()}})}})(jQuery);

$(document).ready(function(){

$("#slider").easySlider({

auto: true,

continuous: true,

numeric: false // Cambiar a true si se quiere mostrar la paginación de números

});

});

//]]>

</script>

Por último entra en la sección de Diseño y agrega un elemento HTML/Javascript, ahí pega esto:

<div id="slider">

<script style="text/javascript">

var numposts_gal = 10; // Número de entradas a mostrar

var numchars_gal = 150; // Número de caracteres en el resumen

var random_posts = false; // Cambiar por true si se quieren aleatorios

</script>

<script src="http://nombre-de-mi-blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>

</div>

Cambia el nombre de tu blog donde se indica y listo.

En color naranja puedes ver algunas variantes, una de ellas es que con numeric podemos hacer desaparecer las flechas y en su lugar mostrar una paginación con números para poder navegar por las entradas del slider.
En el último código podrás ver dónde configurar el número de entradas a mostrar, el número de caracteres en el resumen, y si se desea que las entradas aparezcan de forma aleatoria.

Si deseas cambiar las medidas del slider cambia todos los width:480px; y height:320px; que encuentres.
Las flechas son imágenes, así que si deseas modificarlas en color o forma tendrás que cambiar las URLs que se encuentran en el primer código.

Como puedes ver, es un slider con muchas ventajas, la principal es que muestra el contenido de forma automática, sin necesidad de estar agregando entrada por entrada; pero además, la posibilidad de elegir la paginación y las entradas de forma aleatoria le dan un extra.

Hasta la próxima,