Slider automático para mostrar las últimas entradas (Featured Content Slider)

25 de marzo de 2012 893 comentarios ,
Slider Automático

Hemos visto varios sliders con distintos efectos para todos los gustos. Pero muchos no se animan a usar uno por el "mantenimiento" que este implica, es decir, tener que estar editando el slider continuamente para cambiar los textos, los títulos, las imágenes, etc. Así que una petición constante es un slider que haga el "trabajo sucio", es decir, un slider que muestra las últimas entradas del blog de forma automática, sin necesidad de estar editando el slider una vez que esté puesto.

Featured Content Slider es un script original de Dynamic Drive, aunque el slider en sí es una extracción de la plantilla Simplex Transcript. Muestra las últimas 10 entradas publicadas en el blog con su imagen, el título, y un resumen de cada entrada.
El demo puedes verlo aquí mismo.


Para poner este slider automático en el blog entra en la Edición HTML de la plantilla y antes de
]]></b:skin> pega los estilos:

/* 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/AVvXsEhc5quIImWNZG7es6nI64aLpIvSzp0DhzlWbhO_kWiqQsUe7Q4uEgTySqC8PuHiWG_KdnYjPSqOo358vBCs0PyC4VKw8_rrRFudAPQ5aeKxJDfCVdrN9VcAhyphenhyphenXGE60oakEGb83Sj1wF0lc/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;
}
Ahora antes de </head> pega los scripts, que son algo largos:

<script type='text/javascript'>
//<![CDATA[
// Featured Content Slider (CB)
//** Featured Content Slider script- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com.
// Featured Content Slider- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
// This notice MUST stay intact for legal use
// Visit Dynamic Drive at http://www.dynamicdrive.com/ for this script and 100s more

var featuredcontentslider={
ajaxloadingmsg: '<div style="margin: 20px 0 0 20px"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgIbiLucttiUgEAeMY3IoHrq-YDeLAXaGbvNLjbPReDvgHP7Sc-erTApYGCAeotzfI-hAqZpjH-zN7iniZDDz0BwMB5Wbk5WzqLLKNclVgIdoEdeTTvrgtxjNEYK_awd1PH0GcIV-x585hO/s32/loading.gif" /> Cargando imágenes...</div>',
bustajaxcache: true,
enablepersist: true,
settingcaches: {},
jumpTo:function(fcsid, pagenumber){
this.turnpage(this.settingcaches[fcsid], pagenumber)
},

ajaxconnect:function(setting){
var page_request = false
if (window.ActiveXObject){
try {
page_request = new ActiveXObject("Msxml2.XMLHTTP")
}
catch (e){
try{
page_request = new ActiveXObject("Microsoft.XMLHTTP")
}
catch (e){}
}
}
else if (window.XMLHttpRequest)
page_request = new XMLHttpRequest()
else
return false
var pageurl=setting.contentsource[1]
page_request.onreadystatechange=function(){
featuredcontentslider.ajaxpopulate(page_request, setting)
}
document.getElementById(setting.id).innerHTML=this.ajaxloadingmsg
var bustcache=(!this.bustajaxcache)? "" : (pageurl.indexOf("?")!=-1)? "&"+new Date().getTime() : "?"+new Date().getTime()
page_request.open('GET', pageurl+bustcache, true)
page_request.send(null)
},

ajaxpopulate:function(page_request, setting){
if (page_request.readyState == 4 && (page_request.status==200 || window.location.href.indexOf("http")==-1)){
document.getElementById(setting.id).innerHTML=page_request.responseText
this.buildpaginate(setting)
}
},

buildcontentdivs:function(setting){
var alldivs=document.getElementById(setting.id).getElementsByTagName("div")
for (var i=0; i<alldivs.length; i++){
if (this.css(alldivs[i], "contentdiv", "check")){
setting.contentdivs.push(alldivs[i])
alldivs[i].style.display="none"
}
}
},

buildpaginate:function(setting){
this.buildcontentdivs(setting)
var sliderdiv=document.getElementById(setting.id)
var pdiv=document.getElementById("paginate-"+setting.id)
var phtml=""
var toc=setting.toc
var nextprev=setting.nextprev
if (typeof toc=="string" && toc!="markup" || typeof toc=="object"){
for (var i=1; i<=setting.contentdivs.length; i++){
phtml+='<a href="#'+i+'" class="toc">'+(typeof toc=="string"? toc.replace(/#increment/, i) : toc[i-1])+'</a> '
}
phtml=(nextprev[0]!=''? '<a href="#prev" class="prev">'+nextprev[0]+'</a> ' : '') + phtml + (nextprev[1]!=''? '<a href="#next" class="next">'+nextprev[1]+'</a>' : '')
pdiv.innerHTML=phtml
}
var pdivlinks=pdiv.getElementsByTagName("a")
var toclinkscount=0 //var to keep track of actual # of toc links
for (var i=0; i<pdivlinks.length; i++){
if (this.css(pdivlinks[i], "toc", "check")){
if (toclinkscount>setting.contentdivs.length-1){
         pdivlinks[i].style.display="none"
continue
}
pdivlinks[i].setAttribute("rel", ++toclinkscount)
pdivlinks[i][setting.revealtype]=function(){
featuredcontentslider.turnpage(setting, this.getAttribute("rel"))
return false
}
setting.toclinks.push(pdivlinks[i])
}
else if (this.css(pdivlinks[i], "prev", "check") || this.css(pdivlinks[i], "next", "check")){
pdivlinks[i].onclick=function(){
featuredcontentslider.turnpage(setting, this.className)
return false
}
}
}
this.turnpage(setting, setting.currentpage, true)
if (setting.autorotate[0]){
pdiv[setting.revealtype]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
sliderdiv["onclick"]=function(){
featuredcontentslider.cleartimer(setting, window["fcsautorun"+setting.id])
}
setting.autorotate[1]=setting.autorotate[1]+(1/setting.enablefade[1]*50)
this.autorotate(setting)
}
},

urlparamselect:function(fcsid){
var result=window.location.search.match(new RegExp(fcsid+"=(\\d+)", "i"))
return (result==null)? null : parseInt(RegExp.$1)
},

turnpage:function(setting, thepage, autocall){
var currentpage=setting.currentpage //current page # before change
var totalpages=setting.contentdivs.length
var turntopage=(/prev/i.test(thepage))? currentpage-1 : (/next/i.test(thepage))? currentpage+1 : parseInt(thepage)
turntopage=(turntopage<1)? totalpages : (turntopage>totalpages)? 1 : turntopage //test for out of bound and adjust
if (turntopage==setting.currentpage && typeof autocall=="undefined") //if a pagination link is clicked on repeatedly
return
setting.currentpage=turntopage
setting.contentdivs[turntopage-1].style.zIndex=++setting.topzindex
this.cleartimer(setting, window["fcsfade"+setting.id])
setting.cacheprevpage=setting.prevpage
if (setting.enablefade[0]==true){
setting.curopacity=0
this.fadeup(setting)
}
if (setting.enablefade[0]==false){ //if fade is disabled, fire onChange event immediately (verus after fade is complete)
setting.contentdivs[setting.prevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.prevpage, setting.currentpage)
}
setting.contentdivs[turntopage-1].style.visibility="visible"
setting.contentdivs[turntopage-1].style.display="block"
if (setting.prevpage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[setting.prevpage-1], "selected", "remove")
if (turntopage<=setting.toclinks.length) //make sure pagination link exists (may not if manually defined via "markup", and user omitted)
this.css(setting.toclinks[turntopage-1], "selected", "add")
setting.prevpage=turntopage
if (this.enablepersist)
this.setCookie("fcspersist"+setting.id, turntopage)
},

setopacity:function(setting, value){
var targetobject=setting.contentdivs[setting.currentpage-1]
if (targetobject.filters && targetobject.filters[0]){ //IE syntax
if (typeof targetobject.filters[0].opacity=="number") //IE6
targetobject.filters[0].opacity=value*100
else //IE 5.5
targetobject.style.filter="alpha(opacity="+value*100+")"
}
else if (typeof targetobject.style.MozOpacity!="undefined") //Old Mozilla syntax
targetobject.style.MozOpacity=value
else if (typeof targetobject.style.opacity!="undefined") //Standard opacity syntax
targetobject.style.opacity=value
setting.curopacity=value
},

fadeup:function(setting){
if (setting.curopacity<1){
this.setopacity(setting, setting.curopacity+setting.enablefade[1])
window["fcsfade"+setting.id]=setTimeout(function(){featuredcontentslider.fadeup(setting)}, 50)
}
else{ //when fade is complete
if (setting.cacheprevpage!=setting.currentpage) //if previous content isn't the same as the current shown div (happens the first time the page loads/ script is run)
setting.contentdivs[setting.cacheprevpage-1].style.display="none" //collapse last content div shown (it was set to "block")
setting.onChange(setting.cacheprevpage, setting.currentpage)
}
},

cleartimer:function(setting, timervar){
if (typeof timervar!="undefined"){
clearTimeout(timervar)
clearInterval(timervar)
if (setting.cacheprevpage!=setting.currentpage){ //if previous content isn't the same as the current shown div
setting.contentdivs[setting.cacheprevpage-1].style.display="none"
}
}
},

css:function(el, targetclass, action){
var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
if (action=="check")
return needle.test(el.className)
else if (action=="remove")
el.className=el.className.replace(needle, "")
else if (action=="add")
el.className+=" "+targetclass
},

autorotate:function(setting){
 window["fcsautorun"+setting.id]=setInterval(function(){featuredcontentslider.turnpage(setting, "next")}, setting.autorotate[1])
},

getCookie:function(Name){
var re=new RegExp(Name+"=[^;]+", "i"); //construct RE to search for target name/value pair
if (document.cookie.match(re)) //if cookie found
return document.cookie.match(re)[0].split("=")[1] //return its value
return null
},

setCookie:function(name, value){
document.cookie = name+"="+value

},


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/AVvXsEjVXF04jdmAmOyP2QA_0iBu2WkvHsszgdUFcM2NsCudLfLo_ja-MfbxSC-YmZ5RmURsfcc49olvYqRNWiVR4jNJZO6M_aQtC7P_zJoU7Yh7Mka5LnKzUKh2CtIKwGb5A_GvOS6ZBKYhkCU/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;


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 showrecentposts1(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 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++;
}

}


function showrecentposts2(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();

  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>' : '';

var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);


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>');
}


function showrecentposts5(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
   
  for (var i = 0; i < numposts5; 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 = '<li><div class="entry"><a href="'+posturl+'"><img width="80" height="85" class="alignleft" src="'+img[i]+'"/></a><h2 class="sidebarPostTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></li>';
document.write(trtd);    

 j++;
}

}

function showrecentposts6(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
   
  for (var i = 0; i < numposts6; 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="text"><h2 class="postTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p><div class="clear"></div> </div><div class="imgThumb"><a href="'+posturl+'"><img width="269" height="201" class="alignright" src="'+img[i]+'"/></a></div>';
document.write(trtd);    

 j++;
}

}

function showrecentposts7(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
     document.write('<ul>');
  for (var i = 0; i < numposts7; 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 = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="150" height="113" class="alignnone" src="'+img[i]+'"/></a> </div><div class="info"><p>'+posttitle+'</p><p class="morePhoto"><a href="'+posturl+'">Leer más</a></p></div></li> ';
document.write(trtd);    

 j++;
}
document.write('</ul>');
}

function showrecentposts8(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img  = new Array();
 
  for (var i = 0; i < numposts8 ; 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="contentdiv"><div class="sliderPostPhoto"><a href="'+posturl+'"><img width="100%" height="341" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2></div></div><div class="featuredPost lastPost"><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';
document.write(trtd);    

 j++;
}

}

 //]]>
</script>

<script type='text/javascript'>
var classicMode = false ;
var summary = 30;
var indent = 3;

function stripHtmlTags(s,max){return s.replace(/&lt;.*?&gt;/ig, &#39;&#39;).split(/\s+/).slice(0,max-1).join(&#39; &#39;)}

function getSummaryLikeWP(id) {
        return document.getElementById(id).innerHTML.split(/&lt;!--\s*more\s*--&gt;/)[0];
}

function getSummaryImproved(post,max){
   var re = /&lt;.*?&gt;/gi
   var re2 = /&lt;br.*?&gt;/gi
   var re3 = /(&lt;\/{1}p&gt;)|(&lt;\/{1}div&gt;)/gi
   var re4 = /(&lt;style.*?\/{1}style&gt;)|(&lt;script.*?\/{1}script&gt;)|(&lt;table.*?\/{1}table&gt;)|(&lt;form.*?\/{1}form&gt;)|(&lt;code.*?\/{1}code&gt;)|(&lt;pre.*?\/{1}pre&gt;)/gi
 
   post = post.replace(re4,&#39;&#39;)
   post = post.replace(re3,&#39;&lt;br /&gt; &#39;).split(re2)
 
   for(var i=0; i&lt;post.length; i++){
    post[i] = post[i].replace(re,&#39;&#39;);
   }
 var post2 = new Array();
 for(var i in post) {
  //if(post[i]!=&#39;&#39; &amp;&amp; post[i]!=&#39; &#39; &amp;&amp; post[i] != &#39;\n&#39;) post2.push(post[i]);
  if(/[a-zA-Z0-9]/.test(post[i])) post2.push(post[i]) ;

 }


 var s = &quot;&quot;;
 var indentBlank = &quot;&quot;;
 for(var i=0;i&lt;indent;i++){
  indentBlank += &quot; &quot;;
 }
 if(post2.join(&#39;&lt;br/&gt;&#39;).split(&#39; &#39;).length &lt; max-1 ){
   s = post2.join(indentBlank +&#39; &lt;br/&gt;&#39;);
 } else {
  var i = 0;
  while(s.split(&#39; &#39;).length &lt; max){
   s += indentBlank + &#39; &#39; + post2[i]+&#39;&lt;br/&gt;&#39;;
   i++;
  }
 }
 return s;
}


function createSummaryAndThumb(pID,title,url,date,comment){
 var posturl= url;
 var title=title;
 var date =date;
 var comment = comment;
 var div = document.getElementById(pID);
 var content = div.innerHTML;
 if (/&lt;!--\s*more\s*--&gt;/.test(content)) {
  div.innerHTML = getSummaryLikeWP(pID);
  div.style.display = &quot;block&quot;;
 }
 else {

 var imgtag = &quot;&quot;;
 var img = div.getElementsByTagName(&quot;img&quot;);
 var summ = summary;
 if(img.length&gt;=1) {
   imgtag = &#39;&lt;a href=&quot;&#39;+posturl+&#39;&quot;&gt;&lt;img width=&quot;90&quot; height=&quot;65&quot; class=&quot;alignleft&quot; src=&quot;&#39;+img[0].src+&#39;&quot;&gt;&lt;/a&gt;&#39;;
   }
  var summary1 = imgtag+&#39;&lt;p&gt;&#39;+stripHtmlTags(content,summary)+&#39;...&lt;/p&gt;&#39;;

 div.innerHTML = summary1;
 div.style.display = &quot;block&quot;;
 }
}
</script>

Por último, SIN expandir los artilugios busca esta línea:
<b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/>

Justo arriba de ella agrega esto:

<b:widget id='HTML88' locked='false' title='Slider' type='HTML'>
<b:includable id='main'>
<div id='featuredContent'>   <div id='paginate-featured-slider'>
<a class='prev' href='#prev'>Anterior</a>
<a class='toc' href='#1' rel='1'>1</a>
<a class='toc' href='#2' rel='2'>2</a>
<a class='toc' href='#3' rel='3'>3</a>
<a class='toc' href='#4' rel='4'>4</a>
<a class='toc' href='#5' rel='5'>5</a>
<a class='toc' href='#6' rel='6'>6</a>
<a class='toc' href='#7' rel='7'>7</a>
<a class='toc' href='#8' rel='8'>8</a>
<a class='toc' href='#9' rel='9'>9</a>
<a class='toc' href='#10' rel='10'>10</a>
<a class='next' href='#next'>Siguiente</a>
</div>
<div class='sliderwrapper' id='featured-slider'>
<script>
document.write(&quot;&lt;script src=\&quot;http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default?max-results=&quot;+numposts10+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts8\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
<script type='text/javascript'>
featuredcontentslider.init({
id: &quot;featured-slider&quot;, contentsource: [&quot;inline&quot;, &quot;&quot;],
toc: &quot;#increment&quot;,
nextprev: [&quot;&#171; Anterior&quot;,&quot;Siguiente &#187;&quot;],
revealtype: &quot;click&quot;,
enablefade: [true, 0.4],
autorotate: [true, 5000],
onChange: function(previndex, curindex){ }
 })
</script>
</div>
</b:includable>
</b:widget>
Agrega el nombre de tu blog donde se indica y listo.
El slider estará arriba de tus entradas, aunque una vez puesto puedes arrastrar el gadget al lugar que quieras desde la sección de Diseño.

Aunque el ancho del slider se puede modificar, lo ideal sería dejarlo tal como está, pues hacerlo más ancho implicaría agregar más pestañas y eso podría hacer más lenta la carga del blog, ya que como pueden ver el script es bastante largo.

Las imágenes cambian solas, pero si el usuario navega através de las pestañas entonces el slider se detendrá para que el lector pueda ver el contenido tranquilamente.

Cuando una entrada no tenga imagen mostrará una imagen por defecto, para cambiarla por alguna otra de tu preferencia, busca en el script esta URL y cámbiala por la de tu imagen:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVXF04jdmAmOyP2QA_0iBu2WkvHsszgdUFcM2NsCudLfLo_ja-MfbxSC-YmZ5RmURsfcc49olvYqRNWiVR4jNJZO6M_aQtC7P_zJoU7Yh7Mka5LnKzUKh2CtIKwGb5A_GvOS6ZBKYhkCU/s0/sin-imagen.png

En caso de que el texto del resumen se llegara a exceder podemos modificar el número de caracteres a mostrar:
summaryPost = 220;
Se encuentra dentro del script, y con un valor más bajo mostrará menos caracteres en el resumen de las entradas.

Si usas las entradas con el script del Leer más automático, entonces pon el script de este slider antes del script del Leer más, para que las miniaturas de tus entradas no se vean afectadas.

La ventaja de este slider es que una vez puesto recogerá los datos de las 10 últimas entradas de forma automática, así que ya no tendremos que hacer nada más excepto disfrutarlo.


893 comentarios en:

" Slider automático para mostrar las últimas entradas (Featured Content Slider) "

  1. Ahora yo te pillé dándole clic a "Publicar", XD

    Los slider son buenos para los que publican diario, creo yo.

    Saludos.

    ResponderEliminar
  2. está buenísimo Potro! Muchas Gracias! lo voy a implementar en mi blog.Saludos.

    ResponderEliminar
    Respuestas
    1. Que todo salga bien Marcos, saludos.

      Eliminar
    2. Ya lo implementé en mi blog y quedó muy bien :-)
      Algunas consultas:
      Modifiqué el ancho para que quede igual al ancho de las imágenes de las entradas, ¿sería posible centrar al ancho del slider los botones de anterior numeros y siguiente?
      y por último ¿Será posible centrar la imagen en forma vertical para que no se corte solo de abajo?
      Gracias, Saludos!

      Eliminar
    3. ya pude alinear las imágenes, de forma "manual". Lo dejo por si a alguien le sirve. Mis imágenes son todas de la misma altura: asi que hice la altura de mi imagen menos altura del slider / 2. A ese valor lo puse acá con signo menos:
      #featured-slider img {
      margin-top:-52px;
      }

      Eliminar
    4. alinear no, quise decir centrar verticalmente.
      Ahora me quedaría poder centrar los botones Anterior números Siguiente al ancho del slider

      Eliminar
    5. Debajo de #paginate-featured-slider { agrega esto:
      margin-left: 17px;

      Con eso lo moverás hacia la derecha.

      Eliminar
    6. Perfecto! Muchas Gracias Potro!
      Qué bueno que tengo un solo blog, porque veo que me había olvidado de dejar el link, jaja.
      Para el que quiera ver lo lindo que quedó este es mi blog:
      www.tomandofotos.com
      Saludos!

      Eliminar
    7. una cosa mas que me acabo de dar cuenta, puede ser que este slider afecte a la paginación? ya no veo los botones de páginas sino los de "Entradas Antiguas", "Página Principal" y "Entradas Recientes"

      Eliminar
  3. fantastico...!! algunas veces uno desea solo algo de una plantilla y no sabe por donde buscar... :D

    ResponderEliminar
    Respuestas
    1. Lo sé, ya varios habían preguntado por el slider de esa plantilla, así que se puede usar sin tener que instalar la plantilla :)

      Eliminar
  4. Esto está genial!. Hola, soy muy novato en el mundo de los blog y tengo una consulta y como la opción de Contacto no está disponible me tomé el atrevimiento de utilizar este medio. Si está fuera de lugar, le pido disculpas y espero borren mi comentario, y si no ojalá puedan ayudarme.
    Verá, quizás sea una consulta simple pero me busque por todos lados la manera de hacerlo y no consigo encontrarla,termine perdido entre tantos aportes y etiquetas y busquedas sin encontrar nada.

    Bueno, no quisiera extenderme demasiado, lo que yo quiero hacer es agregar una fila de gadget a la izquierda de las publicaciones,de modo tal que quede: "FILA DE GADGET" "ENTRADAS DE BLOG" "FILA DE GADGET". Espero se entienda y tengan la posibilidad de darme una mano. SALUDOS!

    ResponderEliminar
    Respuestas
    1. =D Sencillo, Diego: estando en el escritorio, ve a "Plantilla" y una vez ahí clickea en el botón naranja que dice "Personalizar". Entre las opciones de personalización que tiene, ve a "Diseño" y ahí eliges el que más te guste, tanto para el cuerpo del blog como para el pie de página~.


      Como todas, buena entrada, Potro.

      Eliminar
    2. Es que ya tengo una plantilla que no quisiera abandonar y al entrar en Diseño dentro de la personalización, me dice que no es aplicable a esa plantilla. Quizás mediante la edición HTML se pueda agregar, el problema es que no se qué código ni donde ponerlo.

      Eliminar
    3. Hola Diego, ¿en cuál blog quieres agregar la otra sidebar?

      Eliminar
    4. Hola "El Potro" en este blog: http://tusalternativaslibres.blogspot.com/.
      Aunque en realidad solo quiero la plantilla. La estoy armando y desarmando. ^^

      Eliminar
    5. Cambia el ancho (width) del #wrapper y del #header-wrapper por 1200px
      Luego arriba de #sidebar-wrapper { añade esto:
      #sidebarleft-wrapper {
      width:260px;
      float:left;
      margin:25px 0 25px 0;
      word-wrap: normal; /* fix for long text breaking sidebar float in IE */
      overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
      }


      Por último, arriba de <div id='main-container'> agrega esto:

      <div id='sidebarleft-wrapper'>
      <b:section class='sidebar' id='sidebarleft' preferred='yes' />
      </div>

      Eliminar
    6. Gracias genio, maestro, ídolo. Te debo mi hermana jajajajaj. Sos un groso loco.

      Eliminar
  5. muy buen post necesitaba algo asi para mi blog gracias

    ResponderEliminar
  6. ¿Se podrá modificar el script para que muestre sólo las entradas correspondientes a una etiqueta en particular o que excluya las entradas de una etiqueta? Digo, si es posible.
    Saludos.

    ResponderEliminar
    Respuestas
    1. Sí, sí se puede, de hecho el slider original muestra las entradas de una etiqueta específica. Sólo cambia en el último código esto:
      http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default

      Por esto:
      http://www.nombre-de-mi-blog.blogspot.com/feeds/posts/default/-/Nombre-de-la-etiqueta

      Eliminar
  7. Está genial, y siempre he querido poner algo así, pero ahora no sé si se verían muy recargados con tantas cosas como tengo o dificultaría la carga del de las fotos. No quiero abusar, pero ¿te importaría darme tu opinión?
    Tengo una duda más, en el de poemas, ¿no habría forma de que recogiera imágenes aleatorias del mismo blog aunque no estén puestas en la entrada en particular?
    Te dejo este beso y mi gratitud por toda tu desinteresada ayuda.
    ¡Buena noche para ti!, :)

    ResponderEliminar
    Respuestas
    1. Pienso igual que tú, lo ideal es no recargar el blog, así que salvo que sea muy necesario es mejor prescindir de él o algún otro gadget.

      Puedes usar un gadget que muestre imágenes aleatorias cada vez que cargue la página, pero no es automático, tendrías que poner manualmente las URLs de las imágenes que quieres que aparezcan al azar.

      Buenos días desde aquí.
      Besos :)

      Eliminar
    2. Ok, sí, es lo mejor, además ya hay bastante posibilidad con el "linkwith" para picar en otras entradas.
      Muchas gracias por ayudarme a decidirme (aaaay, las indecisas como yo con estos líos, ..jejejeje, eres un tesoro! RE-BESO, Potro.
      Buenos días, :)

      Eliminar
    3. Indecisa tú, e indeciso yo, no creo que sea bueno colega :P
      Buenas tardes :)

      Eliminar
  8. GRACIAS POR EL APORTE,TE QUIERO PEDIR UNA AYUDA..¿COMO HAGO PARA CENTRAR EL SLIDERS??

    ResponderEliminar
    Respuestas
    1. Hola Mensays, para centrar el slider agrega debajo de #featuredContent { esto:
      margin:0 auto;

      Eliminar
    2. Gracias Potro,me funciono de maravilla..una ultima pregunta,quiero poner un titulo justamente encima del slider.. como(ULTIMAS ENTRADAS DE SECRETOS DE LA WEB..como hago????



      www.secretosdelaweb.com

      Eliminar
    3. Justo arriba de <div id='featuredContent'> agrega esto:
      <h2>ULTIMAS ENTRADAS</h2>

      Eliminar
  9. Hola Potro:

    Ya lo agregué en mi blog y quedó de show, aunque yo lo coloqué en el lado izquierdo.

    Tengo dos dudas y sé (o creo) que me las puedes resolver... Sí entras a mi blog (http://TVboricuaUSA.com) te darás cuenta que donde inician las entradas queda un espacio bastante ancho del menú. Quiero que ese espacio sea más pequeño y/o que no haya espacio.

    Lo que me gustaría es que la fecha quedará justo al ladito de donde dice "siguiente". Me podrías ayudar con eso??? Mil gracias.

    ResponderEliminar
    Respuestas
    1. Hola TVboricua.USA, agrega antes de ]]></b:skin> esto:
      #Blog1 {margin-top: -35px;}

      Saludos.

      Eliminar
    2. Mil gracias por tu ayuda Potro. Listisimo...!

      Eliminar
  10. Hola! Muchas gracias, es genial este slider. Además con esa gran ventaja de no tener que estarlo editando constantemente, mucho más cómodo.
    Solo una pregunta: ¿Cómo puedo hacer que quede centrado? Me queda alineado a la izquierda y me sobre mucho espacio a la dcha, y eso no queda demasiado bien estéticamente. Te dejo link a mi blog para que veas lo que te comento:
    http://nosinmymakeup.blogspot.com

    GRacias!

    ResponderEliminar
    Respuestas
    1. Esa es la mayor ventaja, que una vez puesto nos olvidamos de él :)
      Para centrarlo agrega después de #featuredContent { esto:
      margin:0 auto;

      Saludos.

      Eliminar
    2. Muchas gracias, ahora queda genial!!! Muy bueno este post, Potro!!! Mil gracias.

      Eliminar
  11. Esta genial Potro!! Gracias por tu trabajo!!

    ResponderEliminar
  12. Muchas gracias!

    Está cojonudo, pero me aparece descentrado! Cómo podría centrar el widget?

    Saludos.
    Salva

    ResponderEliminar
  13. ¿Dónde tengo que ingresar el código para que aparezca en la columna de la derecha?
    Genial el aporte, Potro.

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Solucionado, amigo. Hay que agregarlo justo debajo de:


      Luego ya hay que editarlo para que quede encuadrado. A poco que bichees un poco se hace. Voy aprendiendo cositas gracias a ti ;)

      Eliminar
    3. ¿Por qué no aparece la línea con el código?

      Eliminar
    4. Porque en los comentarios no se ven los códigos, primero hay que convertirlos a texto plano ;)

      Eliminar
    5. Ahora sí :) Para colocar el gadget en la columna de la izquierda sólo hay que añadir el código justo debajo de:
      <b:section-contents id='sidebar-right-1'>

      Por si alquien lo necesita ;)

      Eliminar
  14. Donde Puedo Aumentar El Ancho Porfa

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. Cambia todos los width:450px; por el ancho que quieras.

      Eliminar
  15. Hola Potro, que bueno esto, y lo de aplicarlo a una etiqueta específica ¡excelente! experimentaré, aunque esos códigos taaaannn largos me dan escalofríos...jejejejeje

    ResponderEliminar
    Respuestas
    1. Jajaja, no temas, que una vez que estén puestos no tendrás que siquiera verlos ;)

      Eliminar
  16. Demasiado bueno, no voy a ponerlo todavía pero voy a dejarlo entre mis favoritos para probarlo en alguna nueva creación.
    Muchas gracias.
    Gabriela.

    ResponderEliminar
    Respuestas
    1. Seguro que sí Gabriela, cuando te animes a ponerlo ahí estará :)

      Eliminar
  17. umm yo ya tengo un slider pero que no es automatico y me gusta bastante ese la verdad... alguna idea para integrar los 2 de forma que queden decentes?? blogp3ru.blogspot.com nose ni donde meterlo :)

    ResponderEliminar
    Respuestas
    1. Por ahora no, es uno u otro.

      Eliminar
    2. mataria porque pusieras el slider mas bonito y mejor centrado el boton de siguiente articulo :)

      Eliminar
  18. seria perfecto si el codigo fuese un poco mas corto jaja

    ResponderEliminar
  19. Potro, como puedo hacer para centrar el slider?
    Exelente aporte capo!

    ResponderEliminar
    Respuestas
    1. Gracias Nico. El slider se centra agregando debajo de #featuredContent { esto:
      margin:0 auto;

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

    ResponderEliminar
  21. Potro!, excelente info

    Coolerisisisisisisiisismo! el slider

    ResponderEliminar
  22. Lo que necesitaba!!! Pero me salta una duda, ¿habrá alguna forma de no poner tantas entradas? Encuentro que 10 es mucho... me encantaría poner a lo sumo 4 :D

    Saludos amigo! :)

    ResponderEliminar
    Respuestas
    1. Por supuesto Panchito, para poner menos entradas cambia donde dice:
      numposts8= 10;

      Por:
      numposts8= 4;

      Eso hará que se muestren sólo 4
      Saludos :)

      Eliminar
  23. Hola EL Potro, el slide es perfecto y funciona de maravilla pero nose porque al poner el slide las imágenes del "Leer más" han disminuido, lo puedes comprobar tu mismo: http://todaymotor.blogspot.com.es/
    Saludos.

    ResponderEliminar
    Respuestas
    1. a mi también me a pasado lo mismo, esperemos que la respuesta del maestro Jedi (Potro) pueda aclarar ese sombrío y pequeño problema

      Eliminar
    2. Descuiden, sólo pongan el script que usan para el "Leer más" después del script del slider, de esa forma no se verán afectadas las miniaturas de las imágenes. Saludos.

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

      Eliminar
    4. quedo bien. Gracias Potro.

      Solo una duda, el slider lo e puesto al lado derecho y para ello lo e tenido que empequeñecer, pero a la hora de hacer eso, en las fotos del slider en el titulo de las post a quedado un color plomo, eso es normal. Si se puede sacar y que quede solo con un negro tranparente como el original ¿que tendria que cambiar? a menos claro que sea consecuencia de la reducción y cambios que hice... el blog es este http://elojoderojas.blogspot.com/

      de todos modos gracias, quedo OK

      Eliminar
    5. Es porque en tu plantilla en los títulos tienes ese fondo, así que los títulos de las entradas del gadget también toman ese estilo.
      Para quitarlo agrega debajo de h2.featuredTitle { esto:
      background: none;

      Eliminar
    6. Gracias, eres lo máximo y veloz a la hora de dar respuestas (Y)

      Eliminar
  24. Hola Potro¡

    Este Slide es compatible con otros?

    Te lo comento puesto que intento añadir este, se visualiza bien, pero no tiene movimiento ni funcionan los enlaces (números).

    Puede ser que n funcione por tener otro Slide?

    Saludos

    ResponderEliminar
    Respuestas
    1. Podría ser, sobre todo si el otro slider que tienes usa un script similar a este.

      Eliminar
    2. Gracias por contestar Potro.

      Yo tengo este slide: http://ciudadblogger.com/2010/10/orbit-slider-de-imagenes-con-jquery.html publicado por ti.

      Podría tener los dos? seguro que hay alguna parte del script que tendría que modificar...

      Eliminar
    3. ¿Los dos al mismo tiempo? Sí, usan scripts diferentes así que puedes usar ambos sin problema.

      Eliminar
    4. Pues no me funcionan Potro...

      Cuando pongo el de las entradas, se visualiza bien peo no tiene movimiento ni los enlaces.

      Sabes como podría solucionarlo?

      Gracias

      Eliminar
    5. ¿En cuál blog lo has puesto? Porque entré al de tu perfil pero no veo que tengas puesto este slider.

      Eliminar
    6. ushebtisegipcios.blogspot.com

      Ahora no esta puesto, como no conseguía que funcionase bien lo quité.

      Eliminar
  25. Hola potro!
    Me encanta este consejo para mi blog!
    Ya lo agregue, y queda fantastico!
    Solo una cosita:
    Como puedo hacer para que el fondo gris se reduzca del lado derecho?
    es que sale un poco del margen del curpo de donde van las entradas.
    aqui podes echar un vistazo: http://dandoporgracia.blogspot.com/

    Mil, mil gracias!!!!

    ResponderEliminar
    Respuestas
    1. Hola MarG Hija del Altisimo, busca el primer width: 450px; que aparece en el primer código, y cámbialo por width: 420px;
      Con eso se verá bien ;)
      Saludos.

      Eliminar
  26. Muy bueno, justo estaba buscando esto. Ahora una pregunta, como hago para que en el slider aparezcan publicadas 4 entradas en lugar de 10?
    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola ROMÁN MARKIC, mira el comentario #23.1, ahí están las indicaciones. Saludos.

      Eliminar
  27. ESTAAA GENIAL Y FÁCIL DE USAR!!! Como nos tenes acostumbrados. Obviamente lo usare :) Saludos y éxitos

    ResponderEliminar
    Respuestas
    1. Esa es la idea Zero, que esté al alcance de casi todos :)
      Saludos.

      Eliminar
  28. Ya lo esperaba hace tiempo... pero era demasiado bueno para ser cierto... el slider afecta el scrip que tenia de "leer mas automático". Así que tuve que quitarlo.

    Pero viendo los comentarios anteriores se me ocurrió una idea macabra, y la pondré en practica... si todo sale bien, te aviso para presumir.

    ResponderEliminar
    Respuestas
    1. ¡FUNCIONO, ESTA VIVO!

      Tengo un blog donde hago mis experimentos, antes de aplicarlos a mi blog principal... así que experimente un poco y en mi blog:

      http://rawhand.blogspot.mx/

      Y puse el slide, pero lo modifique de tal manera que aparezcan solo las entradas de la etiqueta Raw Hand, pero no las entradas de este blog, sino las entradas de mi blog principal que tienen la etiqueta Raw Hand. Y cuando das clic en el slide te manda a la entrada de mi otro blog...

      Hace mucho que quería hacer esto.

      Eliminar
    2. esa es tu gran idea estas loco mejor espera los comentarios del maestro potro

      Eliminar
    3. Es buena opción, pero parece que no hace falta usar uno u otro, es decir, que puedes tener las entradas con el Leer más y el slider al mismo tiempo. Prueba poner el script del Leer más después del script del slider, con eso deberán funcionar ambos.

      Eliminar
  29. Me gusta mucho la idea ... pero, qué pena a mi no me funciona. Hago todo tal y como dices, pero no se ven imágenes ... supongo que tendré algo con lo que no funciona. Si que es cierto que cuando intento buscar : <b:widget id='Blog1' locked='true' title='Entradas del blog' type='Blog'/> , encuentro lo mismo, pero en lugar de poner True pone False

    Bueno como ves no tengo ni idea de nada de ésto ... :-)

    En fin gracias por tus ideas tan geniales y por compartirlas!!!
    Lyra

    ResponderEliminar
    Respuestas
    1. Lo de True o False es indiferente, si poniéndolo todo exactamente como se indica no se ve o no cambian las imágenes entonces es probable que tengas algún otro script que no deje funcionar este. Habría que ver en cuál blog lo has puesto para echarle un ojo.
      Saludos.

      Eliminar
    2. Hola Potro ... gracias por responder, eres muy amable!!!
      Cuando lo pongo, sólo veo: "anterior 1 2 3 .... 10 siguiente"
      Mi Blog es: http://lascositasdelyra.blogspot.com

      Saludos y gracias de nuevo!!!
      Lyra

      Eliminar
    3. No lo veo puesto en tu blog :S

      Eliminar
    4. Hola de nuevo Potro ... ya lo tengo ... :-)
      Después de leer algunos comentarios, se me ocurrió probar con la interfaz antigua. Resulta que después de pegar los estilos y los scripts con los artilugios expandidos, para continuar me pide guardar la plantilla primero, es decir que si no, no me deja quitar la selección de expandir artilugios para continuar. Y eso no me pasaba con la nueva interfaz, por lo que creo que no guardaba ni los estilos ni los scripts y entonces ... no salía.

      Ya te dije que soy muy ignorante en todo ésto y no se si tiene que ver, pero a mi me ha funcionado así.

      Gracias por todo y que sepas que Ciudad Blogger es un lugar de referencia para mi.

      Saludos!!!
      Lyra

      Eliminar
    5. Qué bueno que ya lo has conseguido, y que te has tomado el tiempo de resolverlo leyendo los comentarios.
      Saludos y gracias por lo último :)

      Eliminar
  30. Muy buenas,

    Muy genial el dato para una página que estoy haciendo. Queria preguntarte si es posible que solo se vea en la página principal, hacerlo condicional igual que se pueden hacer los gadgets y otros elementos.

    Gracias y saludos,

    ResponderEliminar
    Respuestas
    1. Por supuesto torneo interno, teniendo el ID del gadget, que este caso es #HTML88 puedes aplicar una condicional para ocultarlo donde quieras:
      http://ciudadblogger.com/2011/01/ocultar-gadgets-y-elementos-en.html

      Eliminar
  31. No sé si lo habré entendido mal; pero en el primer código ya figura la línea margin:0 auto;, y sin embargo no está centrado.

    Me encanta este slider, pero quisiera ponerlo centrado, ¿puedes ayudarme?

    ResponderEliminar
    Respuestas
    1. Claro, ¿en cuál blog lo has puesto?

      Eliminar
    2. No lo he llegado a poner porque no me sale centrado.

      Eliminar
    3. Sin tenerlo puesto me es imposible saber qué sale mal.

      Eliminar
  32. Que tal potro, acabo de instalar tu slider y no me sale del todo bien.
    Mi página es enformacon.com, podrías echarle un ojo?
    Un saludo.

    ResponderEliminar
    Respuestas
    1. Hola Daniel. Cuando has puesto el primer código, el de los estilos, has eliminado la llave de cierre de los estilos que estaban arriba, eso ha hecho que no se apliquen los estilos del slider y todo lo que haya debajo:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      Eliminar
  33. Barbaro, me sirve para otro proyecto. Saludos


    www.elcapitanpiluso.com.ar [Humor escrito]

    ResponderEliminar
  34. Muy buena potro, últimamente he hecho experimentos con sliders ya sabes que me gusta andarle picando al blogger... he tratado de que los slides sean automáticos pero que además sean texto reales e imagenes reales legibles por buscadores, hay una opción para eso, pero la bronca es que tarda un poco en actualizar el contenido tarda entre 1 a dos hrs pero son legibles por buscadores, es decir, sin javascript o al menos sin javascript en los lugares que más importan como el texto y links, te decia que te quiero preparar unos slides, pero con las broncas de la tramitología para la titulación me traen de arriba pa abajo, ya sabes, burocracia inmensa. Abrazo Brother!

    ResponderEliminar
    Respuestas
    1. No sé qué tan bueno sea que los robots lean con claridad estos textos, ya que encontraría duplicado el contenido al menos en la portada, aun así está bien para experimentar :)
      Un abrazo.

      Eliminar
  35. oh Potro eres un Maestro, increíble, Exelente etc xD
    Saludos

    ResponderEliminar
  36. Potro Quiero Ponerlo En Mi Blog Esta Muy Bueno, Pero Como Quito El Sidebar Que Tengo? Ayudame Amigo! http://futboldeporteking.blogspot.com/

    ResponderEliminar
    Respuestas
    1. No entendí, ¿quieres que tu plantilla no tenga sidebar?

      Eliminar
    2. Quiero Quitar la Que Tengo Ahora "Por Defecto", Y Poner Esta Que Tu Publicaste, No Se Como Hacerlo?

      Eliminar
    3. Entonces te refieres al slider, no a la sidebar. Busca en tu plantilla esta línea:
      <!-- Featured Content Slider Started -->

      Elimina desde ahí hasta:
      <!-- Featured Content Slider End -->

      Con eso se quitará el slider que tienes.

      Eliminar
    4. ;) Que Error!!! Jejej Voy a Probar Que Ta Y Te Comento! ;)

      Eliminar
    5. potro Cuando Agrego El Ultimo Codigo "Sin Expandir Artilugios" no me deja guardarlo despues de ingresarlo, me aparece una ventana de error como si blogger hubier fallado que puede ser? dice "no hemos podido completar tu solicitud etc...

      Eliminar
    6. Potro Ya Lo Puse Pero No Me Aparecen Las Imagenes? Que Puede Ser??

      Eliminar
    7. Prueba poner el script del slider antes del script del Leer más.

      Eliminar
    8. Pero Donde Esta El Scrip De Leer Mas?

      Eliminar
  37. Gracias potro! un 10 como siempre.
    ¿Cómo podría poner este slide en la parte de abajo de mi blog, justo después de la última entrada de mi página principal (en mi caso la 7).

    "..una vez puesto se puede cortar la línea del gadget y ponerla en algún otro lugar..." ¿De qué línea se trata? y ¿En qué lugar debo de ponerla?

    ResponderEliminar
    Respuestas
    1. Gracias antovielx. Si lo quieres debajo de las entradas entonces en lugar de ponerlo arriba de esa línea ponlo debajo de ella.

      Eliminar
  38. Excelente Potro! Ya quedo en mi blog! Muchas gracias por este gran aporte! Saludos y buena vibra! :D

    ResponderEliminar
  39. Hola Potro! tanto tiempo! Se que debes estar saturado de mi hoy :P pero quise probarlo y no me sale... Me quedaron los numeritos y el "siguiente y anterior" nada mas... Sera incompatible con otro script? lo probe en Amo ser Mama.

    ResponderEliminar
    Respuestas
    1. Podría ser Bren, veo que tienes el tercer código pero no los dos primeros, que son los que hacen que el slider funcione y se vea bien.

      Eliminar
    2. Es que Blogger esta loco... Yo puse todos los codigos, pero es cierto que los dos primeros se esfumaron... Cuando los quise agregar nuevamente me saltaba un error y tampoco me dejaba borrar el tercero...cosa de locos. Estaba con la interfaz nueva. Cambie a la antigua y ahi si puse agregar (por tercera vez) los dos primeros codigos. Ahora bien: aparecio el slider debajo de todo, y no se ve ninguna imagen. Cambie la que venia por defecto por la de mi banner y ahora solo se ve esa imagen. Porque no esta arriba de las entradas? y porque no me lee las imagenes??? buahahhh!

      Eliminar
    3. Soy Bren, perdon que estoy con la otra cuenta :)

      Eliminar
    4. No he podido verlo, he tratado de ingresar varias veces y dice que no se pudo encontrar la página, no sé si hayas modificado alguna configuración de tu dominio.

      Eliminar
    5. ahora si me dejas preocupada...como que no pudiste entrar? :( Yo hago click en mi nombre y me lleva a mi perfil y de ahi puedo entrar al blog...

      Eliminar
    6. Ahora ya, puede ser que haya sido mi conexión, aunque las demás páginas me abrían sin problema o.O
      Quizá haya otro script que no permita leer las imágenes de las entradas, pero no logro ver cuál puede ser, sólo dos personas han tenido ese mismo problema y no encuentro un común denominador.
      Aun así hay otro slider automático que ando probando, así que en unos días estaré publicando, quizá ese te funcione mejor.

      Eliminar
    7. ok, a esperar entonces! gracias de todas formas! ;)

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

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

    ResponderEliminar
  42. como cambio el tamaño del slider, ya que en mi plantilla requiere que sea más ancho

    Gracias!!!

    ResponderEliminar
    Respuestas
    1. Cambia todos los width:450px; por el ancho que quieras.

      Eliminar
  43. Gracias potro, todo solucionado. Eres el mejor, saludos.

    ResponderEliminar
  44. hola hice todo pero no me salen las imagenes previa de los videos podrias ayudarme a solucionarlo gracias

    ResponderEliminar
    Respuestas
    1. No me queda muy claro venusargentina, es necesario que dejes la dirección de tu blog donde lo has puesto para entender mejor el problema.

      Eliminar
    2. Hola que tal, sorry por la intromisión, a lo que ella se refiere es que está acostumbrada a usar en uno de sus blogs videos de youtube y con muchos otros gadgets la imagen de preview del video es tomada como thumb... el problema del script es que solo revisa el feed buscando el primer img src"" y no lee el thumb de cada post, por eso es que nunca saldrán las imágenes de los videos de youtube. Saludos

      Eliminar
    3. Ah pues siendo así entonces no se mostrarán; como bien dices, sólo toma las imágenes de la entrada, no de los videos. Gracias por la aclaración :)

      Eliminar
  45. Hola, Potro. Tengo un inconveniente que no tiene que ver con el slider, pero no sabía en qué entrada comentártelo.

    Resulta que en Internet Explorer mi plantilla muestra una separación inmensa debajo del footer que se ve espantosa, y a través de algunas pruebas concluí que se debe a alguna parte del código CSS que no logro detectar. ¿Me podrías ayudar a revolverlo?

    Gracias de antemano.

    ResponderEliminar
    Respuestas
    1. Hola Jorge, el espacio está en el footer, así que es probable que alguno de los elementos que tienes ahí sea el responsable. Prueba quitar uno a uno esos gadgets para ver si alguno de ellos es el culpable.

      Eliminar
    2. Ya lo intenté todo. Quité todo lo del footer, pero sigue figurando ese espacio inmenso. Estoy seguro que el problema está en el CSS pero no sé dónde. Pues para comprobar que el problema no estaba en la otra parte del código lo que hice fue probar la plantilla básica de blogger y percatarme de que todo estuviese bien (es decir, que no apareciera ese inmenso espacio) y efectivamente lo estaba. Una vez hecho esto, borré el CSS de la plantilla básica y pegué el del diseño actual y volvió el problema. No sé cómo solucionarlo...

      Eliminar
    3. Pues nada más que vayas pegando poco a poco el CSS por partes para que vayas viendo qué estilo es. A mí me cuesta trabajo porque no tengo un equipo con Windows siempre, así que en temas de IE siempre estoy frito :(

      Eliminar
  46. Muy buenas Maestro potro:

    Tengo problemas con este y con otros parecidos a este .Te comento;
    Lo instalo todo correcto tanto este como otros de miniatura y otros buscados por hay y el problema es que con este en concreto me salen las entradas que tengo puestas arriba del todo [osea con año 2025 etc...]y la imagen aun estando no me salen ,con el otro slider con imagenes en miniatura,con ese me salen correcto las ultimas entradas ,peero no me salen nada mas que unas cuantas imagenes ,otras me las cambia por algunas que tengo en esa misma entrada.

    Esto ya lo he probado con varios y el problema viene a ser el mismo .
    espero que me puedas ayudar y agradecerte la gran labor que estas haciendo,eres muy grande.
    saludos

    ResponderEliminar
    Respuestas
    1. Hola Juan Carlos V.R, sin saber en cuál blog tienes el problema me será difícil decirte qué sucede, pero si tienes entradas con una fecha muy adelantada entonces éstas son las que se mostrarán, ya que en el feed esas son las entradas más actuales.

      Saludos.

      Eliminar
  47. Potro crees que se pueda aplicar a mi Blog?
    http://www.gospelradiolatina.blogspot.com/

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

    ResponderEliminar
    Respuestas
    1. No conozco ese script Drea, pero puedes preguntar en ese blog, con suerte y te dicen de dónde lo han tomado.

      Eliminar
  49. Una consulta Potro, cual puede ser el estilo, nombre o como se diga de estas dos letras? Las del título y las negras. Si es que sabes, sino no hay drama. Saludos!

    ResponderEliminar
    Respuestas
    1. Pues el título es un encabezado, usualmente hecho con H2, y las negritas son eso, negritas, pero no sé si es eso a lo que te refieres. Saludos.

      Eliminar
    2. No, me refiero a que tipo de letras pueden llegar a ser (Arial, Calibri, etc).

      Eliminar
    3. Ah no lo sé, no reconozco tan fácil todas las fuentes.

      Eliminar
  50. Hola, me parece cojonudo este slider.

    Solo un par de consultas a ver que me puedes decir.
    Lo puse en este blog http://mangaparakindle.blogspot.com/ la cosa es que no me sale las imagenes xD

    Por otro lado, me molaría si pudiera hacerlo en 2 columnas, en la de la izquierda que salga la imagen y en la derecha el resumen (para aprovechar espacio) ¿se podría?

    un saludo :D

    ResponderEliminar
    Respuestas
    1. Podría ser por el script de Leer más, o porque en tus entradas antes de la imagen hay otros elementos. Prueba quitar momentáneamente el script de Leer más para ver si es ese el que no permite que se muestren.
      Lo otro que preguntas quizá se pueda, pero habría que modificar mucho código y yo ando muy limitado de tiempo :S

      Eliminar
  51. Se lo quité, pero no debe ser eso, sigue dando el mismo problema :S . He pensado que fuera cosa del tamaño de las imagenes, que al ser portadas de comics, pues son alargadas, así que puse de primera imagen , una foto que tenia y tampoco.

    en las entradas, antes de la imagen no tengo nada, es decir, la imagen es lo primero que va y el código que lleva, es el que blogger le pone (cosa que no me hace mucha gracia en algunas ocasiones). Hasta se me ocurre que el problema venga porque las imagenes están alojadas en blogger pero tampoco, he puesto una imagen externa.. y tampoco la ha cogido. :S , juer, estoy viendo que este slider no va a ser para mi querido blog xD

    ResponderEliminar
    Respuestas
    1. Pensé lo mismo pero no, no son las imágenes, de hecho para salir de dudas tomé el código tal cual de la imagen de tu segunda entrada y la puse en un blog de pruebas, el resultado fue bueno, el slider muestra la imagen, así que seguro es otra cosa o.O

      Eliminar
  52. Hola Potro,

    No he podido resistirme a añadir el widge, es genial que se actualice solo! Sin embargo creo que ha habido un problema o algo porque no se ve en mi blog: http://alittlebeatle.blogspot.com.es/ (solo se ve anterior y siguiente) y no entiendo por qué. ¿Podrías echarme una mano?

    Gracias!

    ResponderEliminar
    Respuestas
    1. Hola Miryam_Black, hay dos problemas, uno es que los estilos al ponerlos has eliminado la llave de cierre de los estilos de arriba (los de Atribution1) por lo que los estilos del slider se pierden:
      http://ciudadblogger.com/2011/07/errores-comunes-al-poner-los-codigos.html

      El otro problema es que sólo había que poner el nombre del blog y tú lo has puesto desde el http:// con lo cual se repite esa parte. Lo tienes así:
      http://www.http://alittlebeatle.blogspot.com

      Y debe ser así:
      http://www.alittlebeatle.blogspot.com

      Eliminar
    2. Hola Potro,
      Muchísimas gracias por la ayuda. He puesto bien la dirección del blog, lo único que no he encontrado lo de Atribution1. Sin embargo, al cambiar lo de la dirección el slider es visible, aunque va un poco lento pero es visible. ¿Cómo podría hacer para poner en negrita los títulos de las entradas del slider?

      Muchas gracias de nuevo, que paciencia...

      Eliminar
  53. Hola, ¿sabes de alguna página para aprender HTML? He estado buscando, pero me salen cursos para hacer una página web entera, mientras que yo solo quiero hacer gadgets.

    ¿Alguna idea?

    Saludos desde Canarias

    ResponderEliminar
    Respuestas
    1. No lo sé Javier, será cuestión de que hagas búsquedas específicas sobre ese tema.

      Eliminar
  54. Buen dia Potro, tengo una pregunta fuera de este tema, espero puedas ayudarme en ello:

    Mi firefox me dice cuando entro a muchas paginas web, que necesita instalar un pligin, me da la opcion para instalarlo, y cuando lo hago, me muestra que el plugin en cuestion es:
    "Adobe Flash Player 11.1.102.62"
    cuando doy clic a instalar me sale como una pagina de error en el recuadro, como cuando el internet no funciona (diciendome no se pudo encontrar el servidor), asi se pone, y mas abajo un corto aviso que me dice:
    --Verifica que la dirección ingresada no contenga errores como
    ww.ejemplo.mx en lugar de
    www.ejemplo.mx
    --Si no puedes ver otras páginas, comprueba tu conexión
    a la red.
    --Si tu computadora o red están protegidos por un firewall o proxy, asegúrate
    que Firefox tiene permisos para acceder a la web.

    Para mi que es la ultima opcion, porque las dos primeras, funcionan bien.
    Ahora mi pregunta es: COMO PUEDO HACER PARA QUE FIREWALL, PERMITA AL BUSCADOR FIREFOX TENER ACCESO A LA WEB????
    o sea, que pasos debo dar en mi pc, es que no se como se hace esto!
    mil gracias anticipadas.

    ResponderEliminar
    Respuestas
    1. Me encantaría poder ayudarte MarG Hija del Altisimo pero en temas de navegadores y ordenadores no soy muy dado.
      Aun así prueba instalar la última versión de Adobe Flash Player desde su página oficial.

      Saludos.

      Eliminar
  55. Hola Potro, como siempre un gran acierto queda genial, una gran idea para no tener que estar todo el rato actualizando los slider.

    www.vitaminsprotein.es

    ResponderEliminar
    Respuestas
    1. Ciertamente es un alivio para los perezosos como yo :)

      Eliminar
  56. Me gustaria haberlo implementado pero me da un error en mi blog http://lacuartad.blogspot.com no se si sera por el widget del chat

    ResponderEliminar
    Respuestas
    1. ¿Qué error te da? ¿has probado hacerlo con la interfaz antigua?

      Eliminar
  57. Hola amigo Potro, Te quiero pedir un consejo que desconozco, tengo tiempo queriendo ganar dinero por lo que escribo en mi blog, por una u otra no puedo, crees que sea necesario pagar una pàgina web donde ellos puedan incluir a su vez anuncios de google? ¿Què es bueno, no lo se, me puedes ayudar con una orientaciòn? En al caso de AdSence honestamente ni idea como añadirlo al blog, tantas instrucciones me confunden.
    Muchas Gracias
    Josè Diaz de la Vega

    ResponderEliminar
    Respuestas
    1. Hola Jose,

      AdSense no es tan complicado como parece, en realidad sólo basta entrar a la página de AdSense, darse de alta, y pasados unos días te dirán si te han aceptado en el programa. Una vez que eso suceda ahí mismo en la página de AdSense puedes crear tus anuncios con los colores que desees, al hacerlos te dará un código, ese código lo puedes poner en un elemento HTML/Javascript y listo.
      Si precisas de lugares específicos dónde poner los anuncios puedes ver esta entrada:
      http://ciudadblogger.com/2010/01/10-lugares-para-poner-adsense-en.html

      Debo decirte que con AdSense uno no se hace rico, en realidad se gana poco cuando se empieza, depende mucho de la temática de tu blog pues en base a eso es el tipo de anuncios que se mostrarán, pero bueno, puedes probar un tiempo y ver qué tantos resultados te da.

      Saludos.

      Eliminar
  58. hola, quiero agregar este siber pero no de las ultimas entradas si no de una etiqueta en especial, se podria.?

    Saludos potro.

    ResponderEliminar
  59. Hola de nuevo Potro:

    Sé que aquí no es donde debo hacer la pregunta pero no encuentro donde más... y tu "contacto" no funciona...

    Cómo puedo hacer para "reducir" el espacio que hay en mi blog entre gadget y gadget en la sidebar (la tengo en lado izquierdo).

    Si te fijas, la distancia entre un gadget y otro es mucha, y pues me gustaría mínimo que tuviera menos espacio entre ellos. Gracias mil de antemano...

    ResponderEliminar
    Respuestas
    1. La sección de Contacto funciona, pero cada determinado número de envíos tengo que desactivarla para no quedarnos sin servicio, así que seguramente cuando has entrada estaba desactivada.

      Para reducir la distancia entre los gadgets agrega en los estilos esto:

      .main-inner .widget {
      margin: 0px -16px !important;
      }

      Eliminar
  60. Este comentario ha sido eliminado por un administrador del blog.

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

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

    ResponderEliminar
  63. Excelente potro lo coloque en mi blog y a la verdad que estoy agradecido de todo lo que uno aprende contigo en tu blog...sigue hacia delante, muchos te lo agradecemos.

    ResponderEliminar
  64. potro quiero que mire este blog http://javc100.blogspot.com/ quisiera hacer un slide como el que tiene arriba! pero automatico de mis entrada!! me gustaria un contador para mis comentario que diga que cuanto llevo! igual leer mas pero con el efecto de los botones estilo youtube! que los noticias relacionada la pueda oculta o abrir y mira ese slide del final me podria ayudar a decifrar toda este codigo para poder aplicarlo a mi plantilla!

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

    ResponderEliminar
  66. Potro, tres preguntas:

    "Si usas las entradas con el script del Leer más automático, entonces pon el script de este slider antes del script del Leer más, para que las miniaturas de tus entradas no se vean afectadas" ¿Te refieres al script externo editable?, porque yo utilizo el salto de línea que trae el editor de Blogger.

    Supongamos que de las 10 entradas a mostrar sólo tengo 5 ¿Cómo se comporta el script, de la 6 en adelante se repiten las 5 primeras. (Obviamente que entiendo que puedo modificar ese asunto en widget id='HTML88' locked) ¿pero qué pasa si teniendo 5 pido que se muestren 10?

    Tengo una etiqueta que tiene por el momento 5 entradas pero iré colocando más ¿el script me mostrará esas futuras entradas automáticamente o tendré que modificarlo?

    Saludos

    ResponderEliminar
    Respuestas
    1. En esta línea "locked='true' title='Entradas del blog" me aparece FALSE

      Eliminar
  67. Hola Potro.Lo primero de todo.Eres un Crackkkk!!!!!!!.Y ahora la pregunta.Que puedo hacer para integrar mi Fan Page en Google Analitics después de que desapareciera FBML.Un saludo amigo.

    ResponderEliminar
  68. HOLA LA PLANTILLA QUE TENGO NO TIENE LA LINEA EN ESE CASO COMO LO PODRIA HACER

    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

Nota: solo los miembros de este blog pueden publicar comentarios.

 
Ir Arriba Ir Abajo
I Ciudad Blogger