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í:

http://blogginpruebastres.blogspot.com.co/
 
 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,

29 comentarios:

  1. Hola, gracias por la información. como hago para colocar solo el titulo y no las primeras palabras del post?

    ResponderBorrar
    Respuestas
    1. Hola Jorge te comento, hacer lo que pides es muy complejo puedes se tendría que modificar todo el Script y si ves las entradas se ponen de forma automática sólo pones el SLider y el se encarga de publicr entradas.. por ende necesitaria un poco de texto para mostrar pues es el seguimiento que hace... :)

      Borrar
  2. No me salelaetiqueta body uso las plantillas por defecto me gustan mas,
    Ahora dime que etiqueta busco ?

    ResponderBorrar
    Respuestas
    1. Hola Rogelio claro la etiqueta debe salirte así tengas una plantilla de Blogger principal la etiqueta se encuentra casi a lo último de todo el código..

      Saludos,

      Borrar
  3. Muchísimas gracias por compartirlo, me ha sido de gran ayuda para evitarme el trabajo de estar configurando manualmente el slider que me venía por defecto en la plantilla. Además todos los tutoriales están muy bien explicados, seguid así! :D

    ResponderBorrar
    Respuestas
    1. Hola Kory Gracias por el comentario así será seguiremos explicando buenos tutoriales...

      Saludos,

      Borrar
  4. buenas noches, como se colocaria el que tienes en esta pagina arriba con 4 entradas, deslizandose a la izquierda, saludos

    ResponderBorrar
    Respuestas
    1. Hola cronicasleones tendría que preparar el tutorial para ponerlo ya que no recuerdo muy bien como es el paso a paso....

      Saludos,

      Borrar
  5. Gracias amigo por el tutorial, muy bien explicado; solo una duda, en el slide no quiero ni numeros ni flechas sino unos puntos que se colocan abajo, donde el punto de otro color va indicando en que slide esta. muchas gracias.

    ResponderBorrar
    Respuestas
    1. Hola Eli Comprendo lo que quieres te puedo decir que si es posible, pero, el jaque viene al modificar el código ya que no es tan fácil dependiendo de la forma en como se haga por ello si sabes modificar el JS y el HTML y luego usar una imágenes para indicar la posición en el slider se logra...

      Saludos,

      Borrar
    2. Ok. Andres, seguire buscando y muchas gracias por su pronta respuesta, Saludos

      Borrar
  6. no me sale nada y pongo todo bn este es mi blog dale un vistaso
    http://musicadigitalparajesus.blogspot.com/

    ResponderBorrar
    Respuestas
    1. Hola Colega, prueba actualizando la versión de JQUERY ya que las hay más recientes es tan sólo en reemplazo de un link inicial...

      Saludos,

      Borrar
  7. Hola, depronto puedes ayduarnos un poco mas con esto del link, tengo el mismo problema de la persona anterior, no me sale nada. Adicional tengo otra inquietud, me disculpas si soy muy ignorante en esta parte. En los códigos de arriba hay una parte en la que dice borde de los números, estilo etc. Eso hay que borrarlo o se deja? Te agradezco por todo. MI blog http://pensandocorrectamente.blogspot.com.co/

    ResponderBorrar
    Respuestas
    1. Hola, verificaré que pasa con el SLIDER creando un demo para publicarlo y corregiré el post de ser necesario por otra parte a lo otro que me dices, son comentarios en CSS los puedes dejar no pasa nada Blogger no los lee como códigos sólo como comentarios sirve para guiarte y saber que lo que está al frente hace lo que dice el comentario...

      Saludos,

      Borrar
    2. Ya fue corregido el problema ahora debería funcionarte...

      Saludos,

      PD: Ya hay un demo activo para comprobar que funciona en otro blog.

      Borrar
  8. Hola andres como has hecho el slide de fotos que esta en el encabezado de tu web ..pondris el tutorial esta muy legal .Gracias

    ResponderBorrar
    Respuestas
    1. Hola, la verdad no recuerdo como sinteticé todo el código jaja ya que e ayudé un poco investigando pero si lo encuentro todo en mis archivos y bien ordenado lo compartiré claro.

      Saludos,

      Borrar
  9. Oye bro muy buen post, pero tuve un problema, hice todo lo que dijiste en el post al pie de la letra, y we mira como se me puso https://loultimonoticiastutorialesymas.blogspot.com/ Me configuro todo la plantilla, no puedo configurar el ancho de banda, no puedo configurar el diseño -_- ayudame. xD

    ResponderBorrar
    Respuestas
    1. En que parte estás colocando el slider en la parte encima de las entradas ? o a nivel general del ancho detodo tu blog..

      Saludos,

      Borrar
  10. graciasss- buen tutorial, como haces para tener ese slider de las entradas el que tienes al principio de este tutorial, el que tiene varias entradas alargado? quisiera ese en mi blog

    ResponderBorrar
    Respuestas
    1. Hola, en un post más adelante lo estaré publicando ya que ha muchos les ha gustado....

      Saludos,

      Borrar
  11. segui todos los pasos, trate de que me quedara mas grandes pero las fechas no me quedan bien, como hago para colocar las fechas bien? espero me entiendas

    ResponderBorrar
    Respuestas
    1. Hola amigo fechas o flechas? las flechas suelen dar mucho lío la verdad, y como el slider no lo desarrollé yo, me es difícil captar todo el JS encargado de ello, podría corregirse pero come tiempo, por ende es mejor sacar las flechas y usar sólo la numeración....


      Saludos,

      Borrar
  12. Hola me funciona muy bien, solo una duda habria manera de cambiar la medida del fondo gris a partir de donde sale la imaen (reducir la banda) para que quede a la medida de un recuadro mas pequeño ?

    ResponderBorrar
    Respuestas
    1. Hola NefilimOnFire,

      Sí lo puedes lograr trabajando la parte CSS del slider

      Borrar
  13. hola todo me salio bien pero no consigo donde agregar las fotos el va pasando pero la misma yo cambie http://lh4.googleusercontent.com/-xOm3GjEeKp0/T29pY9DlYPI/AAAAAAAACUY/Ec_j6_CMB5M/s000/sin-imagen.png
    por mi imagen pero no se donde agregar las otras

    ResponderBorrar

ESTAMOS EN: