Club Bloggeras: Slider Automatico

De seguro en muchas paginas han visto los nuevos Sliders que se ven super modernos y cool, y ademas de reunir manualmente las entradas con mas importancia para el autor o asi mismo las ultimas entradas. Pero muchas han de saber que para actualizarlo se necesitan cambiar links e imagenes. Y eso conlleva a mantenimiento y hacerlo cada vez que queramos que nuestro blog se vea muy bonito. Por eso Ciudad Blogger en una plantilla se encontro un maravilloso Slider Automatico que actualiza los Slides por si solo cada vez que subimos una entrada nueva y el Slide toma la imagen que ella en la entrada. Ademas de que muestra las 10! Ultimas entradas. La verdad esta genial.

Paro que lo vean pueden checar mi blog aqui que esta enseguidita en la parte de arriba: Ve el Slider automatico en mi Blog

Aqui les dejo el codigo y explicaciones. Todo esto proporcionado por Ciudad Blogger:

Edición HTML de la plantilla y antes de

]]></b:skin> pega esto:

/* Featured Content Slider
 ----------------------------------------------- */
 #featuredContent {
 margin:0 auto;
 padding:7px 7px 5px;
 width:450px;
 display:block;
 background:#efefef; /* Color de fondo */
 }
 #featured-slider {
 position: relative;
 overflow: hidden;
 width:450px;
 height: 320px;
 }
 #featured-slider img {
 display:block;
 height:auto !important;
 }
 #featured-slider .sliderPostPhoto {
 position:relative;
 height:256px;
 width:450px;
 overflow:hidden;
 }
 #featured-slider .sliderPostInfo {
 position:absolute;
 bottom:0;
 width:450px;
 min-height:30px;
 color:#fff;
 padding:5px;
 background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGAroYn7grIpTx1DoSi2o4aeAkby21z9x05V9hk1dhuzJZXYfLdZ49-jbnfSgRmGV9Ai5o7uDVXBDgwFpSqRgRGaPAK2LJdCxL9fv9Dh8Pz7aDNUaH8NJej84sPE0pOE9eNuUwBcDg4Hc/s30/bgtransparent.png);
 height:30px;
 }
 #featured-slider .sliderPostInfo p {
 color:#fff;
 font-size:1.1em;
 padding:3px 5px 5px 6px;
 }
 #featured-slider .contentdiv {
 visibility: hidden;
 position: absolute;
 left: 0;
 top: 0;
 z-index:1;
 }
 #paginate-featured-slider {
 display:block;
 margin-bottom:5px;
 font:bold 14.6px Arial, verdana, sans-serif; /* Tamaño fuente de los números */
 }
 #paginate-featured-slider a {
 color:#000;
 padding:2px 7px;
 background:#ddd;
 }
 #paginate-featured-slider a:hover {
 text-decoration:none;
 color:#cd1713; /* Color de fondo de la pestaña al pasar el cursor */
 }
 #paginate-featured-slider a.selected {
 color:#fff;
 text-decoration:none;
 background:#cd1713; /* Color de fondo de la pestaña activa */
 }
 h2.featuredTitle {
 font:14px "trebuchet ms", arial, sans-serif; /* Tamaño fuente de los títulos */
 font-weight:normal;
 letter-spacing:1px;
 display:block !important;
 margin: auto 0 !important;
 }
 h2.featuredTitle a {
 color:#fff;
 display:block;
 padding:3px;
 }
 h2.featuredTitle a:hover {
 text-decoration:underline;
 }

</body>

Deberas borrar donde hay un texto como este por ejemplo : /* Tamaño fuente de los números */
ya que es como una ayuda donde si no te agrada el tamaño del texto se lo puedes cambiar y asi mismo para colores y tamaños
Antes de </head> pega lo siguiente:

init:function(setting){
  var persistedpage=this.getCookie("fcspersist"+setting.id) || 1
  var urlselectedpage=this.urlparamselect(setting.id) //returns null or index from: mypage.htm?featuredcontentsliderid=index
  this.settingcaches[setting.id]=setting //cache "setting" object
  setting.contentdivs=[]
  setting.toclinks=[]
  setting.topzindex=0
  setting.currentpage=urlselectedpage || ((this.enablepersist)? persistedpage : 1)
  setting.prevpage=setting.currentpage
  setting.revealtype="on"+(setting.revealtype || "click")
  setting.curopacity=0
  setting.onChange=setting.onChange || function(){}
  if (setting.contentsource[0]=="inline")
   this.buildpaginate(setting)
  if (setting.contentsource[0]=="ajax")
   this.ajaxconnect(setting)
 }}
 
imgr = new Array();
 imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhYkk1gt9MwChRrFTzgazDsJy28e7f_oXJBPae_ECuoyiaJumCOqS0Btiqs-5nS0G560AaFlm13bw41M9TIA6495ZVGSTn9-rLA5rtnKwdbxZnYJBT11Ri0oL-J6yKnUoADr4Vf2KJe8b0/s0/sin-imagen.png";
 showRandomImg = true;
 
aBold = true;
 
summaryPost = 220;
 summaryTitle = 25;
 
numposts = 10;
 numposts1 = 1;
 numposts2 = 4;
 numposts3 = 4;
 numposts4 = 1;
 numposts5 = 4;
 numposts6 = 6;
 numposts7 = 5;
 numposts8= 10;
 numposts9= 8;
 numposts10= 12;

var trtd = '<div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img width="70" height="70" class="alignleft" src="'+img[i]+'"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
  document.write(trtd);

j++;
 }
 
}
 
function showrecentposts1a(json) {
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();
 
   for (var i = 0; i < numposts; 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;
 
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

var trtd = '<div class="featuredPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img width="60" height="45" class="alignright" src="'+img[i]+'"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
  document.write(trtd);

j++;
 }
 
}

j++;
 }
 
}
 
function showrecentposts3(json) {
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();
      document.write('<div class="featuredPost lastpost">');
    for (var i = 0; i < 10; 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;
 
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

if (i==0) {
  var trtd = '<a href="'+posturl+'"><img width="75" height="42" class="alignleft" src="'+img[i]+'"/></a><h2 class="spostTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
  document.write(trtd);
           }
  if ((i>0)&&(i<numposts)) {
  var trtd = '<a href="'+posturl+'" class="list">'+posttitle+'</a>';
  document.write(trtd);
           }    
     j++;
  }
  document.write(' </div>');
 
}
 
function showrecentposts4(json) {
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();
  if (numposts5 <= json.feed.entry.length) {
   maxpost = numposts5;
   }
  else
        {
    maxpost=json.feed.entry.length;
    } 
  
     for (var i = 0; i < maxpost; 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;
 
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

if (i==0) {
  var trtd = '<div class="bottomBox_wide left"><div class="thumb"><a href="'+posturl+'"><img width="300" height="225" class="alignone" src="'+img[i]+'"/></a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2>  <p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div></div><div class="bottomBox_narrow right">';     
   document.write(trtd);
           }
  if ((i>0)&&(i<maxpost)) {
  var trtd = '<div class="featuredPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="alignright" height="55" src="'+img[i]+'" width="55"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div>';  
  document.write(trtd);
  }    
  j++;
  }
  document.write('</div>');
 }
 
function showrecentposts4a(json) {
  j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
  img  = new Array();
     if (numposts5 <= json.feed.entry.length) {
   maxpost = numposts5;
   }
  else
        {
    maxpost=json.feed.entry.length;
    } 
  
     for (var i = 0; i < maxpost; 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;
 
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';

if (i==0) {
  var trtd = '<div class="bottomBox_wide right"><div class="thumb"><a href="'+posturl+'"><img width="300" height="225" class="alignone" src="'+img[i]+'"/></a></div><div class="featuredPost lastPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div></div><div class="bottomBox_narrow left">';     
   document.write(trtd);
           }
  if ((i>0)&&(i<maxpost)) {
  var trtd = '<div class="featuredPost"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><a href="'+posturl+'"><img class="alignright" height="55" src="'+img[i]+'" width="55"/></a><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div></div>';  
  document.write(trtd);
  }    
  j++;
  }
  document.write('</div>');
 }

Despues busca lo siguiente sin Expandir Artilugios:

<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Y arriba de eso busca lo siguiente

<b:widget id="HTML88" locked="false" title="Slider" type="HTML">
 <b:includable id="main">
 </b:includable></b:widget><br />
<div id="featuredContent">
<div id="paginate-featured-slider">
<a class="prev" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#prev">Anterior</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#1" rel="1">1</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#2" rel="2">2</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#3" rel="3">3</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#4" rel="4">4</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#5" rel="5">5</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#6" rel="6">6</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#7" rel="7">7</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#8" rel="8">8</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#9" rel="9">9</a>
 <a class="toc" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#10" rel="10">10</a>
 <a class="next" href="http://www.blogger.com/blogger.g?blogID=3831946496227538215#next">Siguiente</a>
 </div>
<div class="sliderwrapper" id="featured-slider">
<script>
 document.write("<script src=\"http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default?max-results="+numposts10+"&orderby=published&alt=json-in-script&callback=showrecentposts8\"><\/script>");
 
</script>
 </div>
<script type="text/javascript">
 featuredcontentslider.init({
 id: "featured-slider",       contentsource: ["inline", ""],
 toc: "#increment",
 nextprev: ["« Anterior","Siguiente »"],
 revealtype: "click",
 enablefade: [true, 0.4],
 autorotate: [true, 5000],
 onChange: function(previndex, curindex){ }
  })
 
</script>
 </div>
</body>

Agrega el NOMBRE DE TU BLOG donde se indica

Aunque esta un poco largo y talvez se les complique vale la pena ya que incrementa tus visitas.

Si tienen dudas en lo que les puse lo pueden encontrar mas explicito aqui: Ciudad Blogger a quien le atribuyo los codigos.

Y si quieren verlo el Slider con mis entradas y darle un vistazo aqui les dejo mi blog: Tips Esenciales

Espero les guste y lo disfruten!

No hay comentarios.:

Publicar un comentario

¡ATENCIÓN: LEE LO SIGUIENTE ANTES DE COMENTAR!

*Si vas a comentar, puedes usar tu cuenta de Google, OpenID, Nombre/Web, y Anónimo
*No Insultar
*No hagas SPAM, Números telefónicos ni Emails
No dejes enlaces a otros blogs, números telefónicos ni correos electrónicos.

¡Gracias!
Att: Staff Club Bloggeras

Club Bloggeras

Páginas

2 de mayo de 2012

Slider Automatico

No hay comentarios.:

Publicar un comentario

Categorías

LinkWithin