Código, Web y Blogs


Slider horizontal con entradas recientes tipo carrusel Blogger [2024]

01/11/2022: Actualicé los Scripts para que funcionara con Blogger 2024 sin problemas ✅✅
Muchos visitantes del blog me han solicitado que comparta el slider que tengo actualmente en el blog, y por si acaso en un futuro lo llego a quitar dejo una imagen del slider:


¡Listo! Básicamente el Slider como se ve, es horizontal separado por 4 bloques para mostrar las entradas más recientes de forma automática, cada cierto tiempo irá avanzando mostrando todo el contenido fresco de tu blog poco a poco, en lo personal es un slider bastante dinámico y útil ya que no requiere mucho espacio se ve muy bien y su implementación es bastante fácil. ¡El demo lo puedes ver justamente en este blog más arriba!.

¡Colocándolo en tu blog!

1. Lo primero será establecer donde pondremos el slider claramente lo más ideal es ubicarlo arriba de todas las entradas y la sidebar ya que su ancho es superior que el de muchos blogs en blogger (Claro todo depende de la plantilla que tengas).

2. Ahora vamos a Plantilla o tema > Editar HTML > Búscamos el siguiente código ]]> </ b: skin> y justo encima pegamos el siguiente CSS:
#carousel{
margin:auto;
width:898px; /*--Ancho completo del carrusel--*/
height:200px;/*--Alto completo del carrusel--*/
border:1px solid #fff;
position:relative;
display:block;
background:#FFFFFF; /*--Color del fondo del carrusel--*/
}
#carousel .container{
position:absolute;
left:25px;
width:815px;/*--Ancho del carrusel Interior--*/
height:200px;/*--Alto del carrusel Interior--*/
overflow:hidden
}
#carousel #previous_button{
position:absolute;
width:25px;height:200px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioFy364tXfycN-f6DAYavDXcC5SmD1bZ-3uCIS5L3QzeotZ1BR4b0_nTZMDxbAaugZemenTtWqOo2aidA3eBL-iftr-sy7lviY3BNXZyzw-ochM9dBxfba7wetLoktHk2yOmEvHasdCpA/s1600/prev.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:200px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhNW-MSrFcgEiIFhgI8pE9AL4l0uGAkFOEKzNWcgO3Dbs2aBhu7PXDjh_9JDJrYv1BGATJemj6uOiODqW_3lUorzLbbIbjuU5PVKokz9E_go18LE1wOchG6tWHFEKvN-DT3X06xzlSpUEs/s1600/next.png) center;z-index:100;cursor:pointer;}
#carousel #next_button:hover,#carousel #previous_button:hover,#carousel ul li:hover{filter:alpha(opacity=80);opacity:.8}
#carousel ul{width:100000px;position:relative;margin-top:10px;}
#carousel ul li{background:#fff ;display:inline;float:left;text-align:center;font-weight:600;line-height:1.1em;width:183px;height:165px;margin:0 1px 10px 12px; padding:6px}
#carousel ul li a.slider_title{color:#242424;display:block;margin-top:-6px;}/*--color texto--*/
#carousel ul li a.slider_title:hover{color:#9B0606;}/*--color texto al pasar cursor--*/

3. Ahora pegaremos justo arriba de </head> el siguiente script que será vital para su correcto funcionamiento (Recomiendo que este código siempre queda de primera por encima de la etiqueta </head>):
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'> //<![CDATA[
(function($){$.fn.jCarouselLite=function(o){o=$.extend({btnPrev:null,btnNext:null,btnGo:null,mouseWheel:false,auto:null,speed:200,easing:null,vertical:false,circular:true,visible:3,start:0,scroll:1,beforeStart:null,afterEnd:null},o||{});return this.each(function(){var running=false,animCss=o.vertical?"top":"left",sizeCss=o.vertical?"height":"width";var div=$(this),ul=$("ul:first",div),tLi=$(".car",ul),tl=tLi.size(),v=o.visible;if(o.circular){ul.prepend(tLi.slice(tl-v-1+1).clone()).append(tLi.slice(0,v).clone());o.start+=v}var li=$(".car",ul),itemLength=li.size(),curr=o.start;div.css("visibility","visible");li.css({overflow:"hidden",float:o.vertical?"none":"left"});ul.css({padding:"0",position:"relative","list-style-type":"none","z-index":"1"});div.css({overflow:"hidden","z-index":"2"});var liSize=o.vertical?height(li):width(li);var ulSize=liSize*itemLength;var divSize=liSize*v;li.css({width:li.width()});ul.css(sizeCss,ulSize+"px").css(animCss,-(curr*liSize));div.css(sizeCss,divSize+"px");if(o.btnPrev)$(o.btnPrev).click(function(){return go(curr-o.scroll)});if(o.btnNext)$(o.btnNext).click(function(){return go(curr+o.scroll)});if(o.btnGo)$.each(o.btnGo,function(i,val){$(val).click(function(){return go(o.circular?o.visible+i:i)})});if(o.mouseWheel&&div.mousewheel)div.mousewheel(function(e,d){return d>0?go(curr-o.scroll):go(curr+o.scroll)});if(o.auto)setInterval(function(){go(curr+o.scroll)},o.auto+o.speed);function vis(){return li.slice(curr).slice(0,v)};function go(to){if(!running){if(o.beforeStart)o.beforeStart.call(this,vis());if(o.circular){if(to<=o.start-v-1){ul.css(animCss,-((itemLength-(v*2))*liSize)+"px");curr=to==o.start-v-1?itemLength-(v*2)-1:itemLength-(v*2)-o.scroll}else if(to>=itemLength-v+1){ul.css(animCss,-((v)*liSize)+"px");curr=to==itemLength-v+1?v+1:v+o.scroll}else curr=to}else{if(to<0||to>itemLength-v)return;else curr=to}running=true;ul.animate(animCss=="left"?{left:-(curr*liSize)}:{top:-(curr*liSize)},o.speed,o.easing,function(){if(o.afterEnd)o.afterEnd.call(this,vis());running=false});if(!o.circular){$(o.btnPrev+","+o.btnNext).removeClass("disabled");$((curr-o.scroll<0&&o.btnPrev)||(curr+o.scroll>itemLength-v&&o.btnNext)||[]).addClass("disabled")}}return false}})};function css(el,prop){return parseInt($.css(el[0],prop))||0};function width(el){return el[0].offsetWidth+css(el,'marginLeft')+css(el,'marginRight')};function height(el){return el[0].offsetHeight+css(el,'marginTop')+css(el,'marginBottom')}})(jQuery); //]]></script>

<script type='text/javascript'> //<![CDATA[
imgr=new Array();imgr[0]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEidGg7QpJQUADcXy1YppR3uED_IAjvtfcnd96qgOaVVfrCCq5oqDQ2uQo4aHkpfa40ItJZf_8yBswQwFDapl93TbXyOSMgQvwVZBSzQYmbKc_3wU7NKYalxbNtqFeNwC86hyphenhyphenNLZ69rcaWA/s1600/no+image.jpg";showRandomImg=true;aBold=true;summaryPost=140;summaryTitle=25;numposts1=15;function removeHtmlTag(strx,chop){var s=strx.split("<");for(var i=0;i<s.length;i++){if(s[i].indexOf(">")!=-1){s[i]=s[i].substring(s[i].indexOf(">")+1,s[i].length)}}s=s.join("");s=s.substring(0,chop-1);return s}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();document.write('<ul>');for(var i=0;i<numposts1;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var pcm;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='replies'&&entry.link[k].type=='text/html'){pcm=entry.link[k].title.split(" ")[0];break}}if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";postdate=entry.published.$t;if(j>imgr.length-1)j=0;img[i]=imgr[j];s=postcontent;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!=""))img[i]=d;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];var day=postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];var y=postdate.split("-")[0];for(var u2=0;u2<month.length;u2++){if(parseInt(m)==month[u2]){m=month2[u2];break}}var daystr=day+' '+m+' '+y;var trtd='<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="183" height="120" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';document.write(trtd);j++}document.write('</ul>')} //]]></script>

4. Finalmente el código que tendrá la estructura HTML de nuestro Slider carrusel horizontal una idea sería buscar en la plantilla de tu blog el siguiente código <div id='main-wrapper'> y justo encima pegar esto:

NOTA: si no te sale el código a buscar del paso 4 procura agregar todo como un gadget HTML y ponlo arriba de las entradas en diseño a ver que tal.
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) { $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
auto:4000,
scroll: 1,
speed: 800,
visible: 4,
start: 0,
circular: true,
btnPrev: &quot;#previous_button&quot;,
btnNext: &quot;#next_button&quot;
});
})})(jQuery)
</script>

5. Guarda cambios y observa la magia.
    

- Lo que tenemos en color azul, son los comentarios de los parámetros CSS para retocar el slider cada uno es claro.

- En color rojo tenemos el script de Jquery, si ya estás usando Jquery en tu blog recuerda eliminar esta línea por otra parte recuerda que puedes sustituir por la versión más actual para ello puedes guiarte por este post.  

No es más por este post recuerda que si surge la duda puedes comentar, hasta la próxima ;) 

ESTAMOS EN: