lunes, 19 de junio de 2017

Poner Slider horizontal entradas recientes tipo carrusel en Blogger

Muchos visitantes del blog me han solicitado que comparta el slider que tengo actualmente en el blog, y por si acaso en 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, 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(http://3.bp.blogspot.com/-SFH7pfuPOg4/UAVZimY-OuI/AAAAAAAAHqE/MOKZ4nE0EFM/s1600/prev.png) center;z-index:100;cursor:pointer;}
#carousel #next_button{position:absolute;right:0;width:25px;height:200px;background:url(http://4.bp.blogspot.com/-pFR58sZNzCo/UAVZh9I72lI/AAAAAAAAHp8/JTIiHJfsqHA/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:
<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]="http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 ;) 

10 comentarios:

  1. Solo me aparece el segundo término de los tres. Que puedo hacer?

    ResponderEliminar
    Respuestas
    1. Hola Eligio a qué te refieres con el segundo término de los tres explica mejor y deja la URL de tu blog para ver y guiarte mejor saludos,

      Eliminar
    2. Lo que pasa es que el comentario no me permite pegar los terminos. Pero te explico, para colocarlo usted da 5 pasos. En los puntos 2,3 y 4 tengo buscar unos terminos en la plantilla; pero no encuentro los terminos del punto 2 y 4

      Mi blog: https://eligiomendez-tic.blogspot.com/

      Eliminar
    3. Hola Eligio,

      PAra el dos entonces busca esta etiqueta <body>

      Justo debajo pega

      <style>
      #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(http://3.bp.blogspot.com/-SFH7pfuPOg4/UAVZimY-OuI/AAAAAAAAHqE/MOKZ4nE0EFM/s1600/prev.png) center;z-index:100;cursor:pointer;}
      #carousel #next_button{position:absolute;right:0;width:25px;height:200px;background:url(http://4.bp.blogspot.com/-pFR58sZNzCo/UAVZh9I72lI/AAAAAAAAHp8/JTIiHJfsqHA/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--*/ </style>

      Sobre el otro còdigo veo que tienes un ticker con noticias recientes que se mueven puedes integrar el paso 5 debajo de donde integraste ese ticker serà la misma y la ubicaciòn màs idea.

      quedo pendiente,

      Saludos,


      Eliminar
    4. Resulta que tampoco me aparece esa etiqueta que me dices. Y de la ultima, o sea del paso 4, no me has dicho como hacerlo

      Que pedría hacer al respecto, me interesa ese Slider?

      Eliminar
    5. Ahora lei bien y veo que me dijiste del paso 5. Resulta que el paso 5, es un gagdet que añadi, no trabaje en le edicion del html.

      Eliminar
  2. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  3. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  4. Gracias por el artículo, muy útil!

    ResponderEliminar

SÍGUENOS EN: