Slider que nos enseña las ultimas entradas para Blogger (jQuery)

Slider que nos enseña las ultimas entradas

»Vamos al blogger

• Con este Slider  podemos poner nuestras ultimas entradas a la vista, Abu Farhan fue el que adaptó del Easy Slider, es un  slider hecho con jQuery .

1»Luego seleccionamos plantilla

 2»Luego seleccionamos la opción “Editar HTML”

3»Después apretamos las teclas Ctrl + F

4» Buscamos:  ]]></b:skin>

5» Y justo esto antes de  ]]></b:skin> pegamos antes  lo siguiente:

/* Easy Slider ----------------------------------------------- */ #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/AVvXsEjmu8gmW2sjcvT6kCs7JNxCdba5fHDZqn_pxEEbrarwzO_4J6-zMr2uA_BnCW2Iz3CfnbrCIrHYojormJB6JGn7b__Uutan_X0rvUBTIJKojpCViLGaRVxs49VvV5JR0RDQdfVEJ4_i2W8/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/AVvXsEhbGGqxuRhWLG9ifv3dJazvat6g-YljbDX4poyTmUCjh1qwngJike01rLusrK_0aDLaVyBimxhf41Sa-WjhnTIZXIwJstwzaXA_0PtWh40mZ-xR6hgyay8VrD3QJbgVgYO-fUJ0qvqgGdA/s77/flecha-prev.png) no-repeat 0 0; } #nextBtn a { background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBSmkkzwB5uCgeBm_ZMdg9Yz9l4vbNZ4yJdhAJuNxwoyK0QNWBZLrqougj5gkTvg5gLrFMNdr8lcNEugMKMozCqdb_wrBn0Vb6SiECVwAJdtyL9sVEMJeJOUpQozbPkDDwgu3iAKjjNPw/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; background:#E1E1D7; color:#000000; padding:0 10px; text-decoration:none; } ol#controls li.current a{ background:#FEFA00; color:#000000; } ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}


6» Buscamos </head> pegamos antes el siguiente 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/AVvXsEj548awxq2TlZ92Jw_aMPRkyUw5cadOvCpbfMKjoeqcShpculu3E2FV_79DWRGMunX4p2uFfRGRHkEl3czFvscufwXkUffCKOu1raNYBMAtM7gp0vVVrdyBsgXj9NnJzO1037sDTCF3wns/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>

7»   Tambien buscamos </body> y antes pegamos :

<script type='text/javascript'> //<![CDATA[ /* * Easy Slider 1.7 - 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: true }); }); //]]> </script>


8» Por último Vamos a Diseño :


9º Añadir Gadget :




10ºSeleccionamos y buscamos :









-------------------------------------------------------------------------------------------------
11º Abrimos y pegamos el siguiente Codigo :

<div id="slider">
<script style="text/javascript">
var numposts_gal = 10; // Cuantas entradas queremos que se vean
var numchars_gal = 130; // Cuantos  caracteres  queremos que aparezca 
var random_posts = false;
</script>
<script src="http://nombre_del_blog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>
----------------------------------------------------------------------------------------------------

(Donde esta en azul ponemos el nombre de nuestro blog)

12º ¡Guardamos y listo!

Si quieres cambiar el tamaño tenemos que buscar ( width:480px     y    height:320px ) y cambiarlo por el tamaño que mejor nos venga.