Auto-Slider

Para esta última insignia tengo preparado algo muy especial... ¿Sabéis qué es un Slider? Es una imagen que da paso a otra, y a otra, y a otra. Muchas páginas web lo tienen para mostrar sus últimas novedades, por ejemplo la web de Dideco (http://www.dideco.es/). 

Normalmente requieren de mucho trabajo para mantenerlos actualizados, pero también los hay automáticos, que recogen el contenido de la última publicación que hayas hecho y lo incluyen por tu en el Slider junto con un pequeño resumen del texto. Mola, ¿eh?

Si queréis incluirlo en vuestro blog y ganaos mi insignia, aquí van las instrucciones:

• Entrad en la plantilla de vuestro blog y en Edición html. 
• Haced click sobre el texto, pulsad Control+F y escribir en el recuadro: ]]></b:skin>
• Cuando lo encontréis, justo antes pegáis este texto: 

/* 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/AVvXsEimcIWTOhSt1LXXQkfPreWukbaU1dq78W1k6ar1-F84VYRK4rKIPdEfOAJXHDhcDxQgMrMdDOKIi08hwPCUMdtxGWQyuCqu8lsTYx8FXj3-Uj-o2c8QcQlW2yiUqp-CEBshRtA_5g7fvgM/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/AVvXsEjQeyJZQfHJNcrxM7jfuY2EAaJY8BiEJN63op5EfaqHCTkTi7AEFhl_hvPGKdZ_y0Kk1cMTDS3ASgUeM1XEGVLUPnCDQ_RzarPSN-0nQuR341upgS4rGI-yQ6WuUW7pctaE1Cp5XhG6nwc/s77/flecha-prev.png) no-repeat 0 0;
}
#nextBtn a {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEju2Ptwy_ebIlk4jBjtiFYSFCkWj0BVFYthC4AU8Ue8eEe-Z78qCb273vu7gX2PoCB3pakE-foH4zFjd923hZyX6BPJDvcWIGfTgWcABBn3rLWo3Xpruv6O5EHYJ_U0rIB0lcTZ3aRa6cs/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;}

• Volved a hacer click sobre el texto y pulsad Control+F, en el recuadro escribid: </head>
• Cuando lo encontréis, justo antes pegáis este texto:

<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/AVvXsEiOVtsY9VzHs9vE5q81xUlvdXRzh0_MBcGj8Q5QHzl289CX8IgwXm2TnzTMIxqRr-G0Phe7Y9QvuVKxQs3pkvpCr55lBMKcqim9gxNNip7_qIAtrEXxdGEAzkHHYIrioggIM-fQsyDyt7I/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>

• Volved a hacer click sobre el texto y pulsad Control+F, en el recuadro escribid: </body>
• Cuando lo encontréis, justo antes pegáis este texto: 

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
 <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: false // Cambiar a true si se quiere mostrar la paginación de números
});
});
//]]>
</script>

• Por último, entra en la sección Diseño y haz click en el recuadro "Añadir un Gadget". Dentro de la ventana que te saldrá, busca el gadget que se llama "HTML/Javascript". Dentro pega este texto: 

<div id="slider"><script style="text/javascript">var numposts_gal = 10; // Número de entradas a mostrarvar numchars_gal = 150; // Número de caracteres en el resumenvar random_posts = false; // Cambiar por true si se quieren aleatorios</script><script src="http://nombre-de-mi-blog.blogspot.com.es/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>

• Para finalizar, recuerda cambiar en el texto de arriba el nombre de tu blog (en color rojo) por el que realmente tenga, por ejemplo en mi caso sería http://historiadeunaticgirl.blogsppot.com.es
• Haz click en guardar, y listo! Ya sólo tienes que colocar ese recuadro en la parte de la página en la que quieras que te aparezca. 

¿Ya tienes tu slider automático? Pues recuerda pasarte por el cuestionario y pedir tu insignia, te la has ganado. Y si ya tienes todas las demás, recuerda pedir también la de Genius Blogger. ¡Enhorabuena blogger!

(Más info en www.ciudadblogger.com)

█ █ █  Back