Slideshow para Blogger ¿Cómo crear?

¿Cómo crear un slideshow en mi blog de Blogger completamente gratis? Tutorial, instrucciones claras de cómo crear un slideshow automático que muestre siempre las últimas publicaciones de mi blog de forma fácil y sencilla. En la plataforma de Blogger usted podrá optar por tener cualquier clase de slideshow gratis sin tener conocimientos de código HTML, lo único que tiene que tener bien en claro es de seguir todas las instrucciones de este tutorial de slideshow para Blogger. Lo que va a mostrar este slideshow son las últimas publicaciones que haya publicado. Podrá mostrar este slideshow solo en la página principal de su blog o solo en las entradas, si quieren tener este efecto pueden seguir las instrucciones del siguiente tutorial.

¿Cómo ocultar o mostrar widgets solo en la página principal o en las entradas?

Vamos a ingresar algunos códigos en el Editor HTML de nuestra plantilla, luego los guardamos y nos dirigiremos a la página de “Diseño” de nuestro blog para “Añadir un gadget” y crear un widget “Html/Javascript” he insertar unas líneas de código para que pueda funcionar nuestro slideshow

Video Tutorial – Slideshow para Blogger ¿Cómo crear?

Puedes ver su demostración en el siguiente blog de demos

¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Da un clic en “Plantilla”

3 Un clic en “Editar HTML”

Ahora se te abrirá el editor HTML de tu plantilla, se mostrara igual como la imagen que esta a continuación

En este punto deberás presionar la tecla “Control” de tu teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de tu editor, debes esperar unos segundos hasta que se muestre, aquí es donde tendrás que insertar el código para buscarlo e insertar los códigos correspondientes en el editor, a continuación mire la imagen la cual te mostrara tal y cual deberá aparecerte el buscador en tu editor HTML de tu plantilla y así puedas colocar el código en el buscador al momento que yo diga busca este código.

4 Busca este código

]]></b:skin>

Ingresa el siguiente código justo arriba del código que encontraste

#featuredContent{float:left;width:800px;margin-right:10px;display:inline} #featured-slider{position:relative;overflow:hidden;width:800px;height:245px} #featured-slider .sliderPostInfo{position:absolute;bottom:2px;width:800px;min-height:30px;height:auto!important;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhyMpyTNO29VEIKsUdhxmpliSCuFGMnOzmXL06Wzsgk2LAz8K0Qan9fzeaj4WxgQwKi4mVv17CyImKdLyIoqaTQr26v09OJP4Y50i5PZioH0ZWW376GuU1x1ef9qP-ARM9-mXQhwFz4nbRT/s1600/transparant.png)} #featured-slider .sliderPostInfo p{color:#fff;font-size:1.1em;padding:0 5px} #featured-slider .sliderPostInfo h2{color:#FFF;font:bold 14px Tahoma;text-transform:none;padding:0 5px} #featured-slider .contentdiv{visibility:hidden;position:absolute;left:0;top:0;z-index:1} #paginate-featured-slider{display:block;background-color:#f0f0f0;margin-bottom:0;padding:0 0 5px} #paginate-featured-slider ul{width:815px;padding-bottom:0;list-style:none} #paginate-featured-slider ul li{display:inline;width:152px;float:left;margin-left:0;margin-right:8px;margin-bottom:3px} #paginate-featured-slider img{padding-top:5px;background:#f0f0f0} #paginate-featured-slider a img{border-top:4px solid #f0f0f0} #paginate-featured-slider a:hover img,#paginate-featured-slider a.selected img{border-top:4px solid #357798}

5 Busca este otro código

</head>

Ingresa el siguiente código justo arriba del código que encontraste

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='http://yourjavascript.com/222517121138/contentslider.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 100; summaryTitle = 25; numposts3 = 5; 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 showrecentposts3(json) {     j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;     img  = new Array();       for (var i = 0; i < numposts3; 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 month = [1,2,3,4,5,6,7,8,9,10,11,12];     var month2 = ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","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 = '<div class="contentdiv"><a href="'+posturl+'"><img width="800" height="240" class="alignnone" src="'+img[i]+'"/></a><div class="sliderPostInfo"><h2 class="featuredTitle"><a href="'+posturl+'">'+posttitle+'</a></h2><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div></div>';     document.write(trtd);     j++; } } function showrecentposts4(json) {     j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;     img  = new Array();       for (var i = 0; i < numposts3; 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 month = [1,2,3,4,5,6,7,8,9,10,11,12];     var month2 = ["Ene","Feb","Mar","Abr","May","Jun","Jul","Ago","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><a class="toc" href="#"><img width="152" height="60" class="alignnone" src="'+img[i]+'"/></a></li>';     document.write(trtd);     j++; } } //]]> </script>

Nota: si ya utilizas en tu blog un jQuery <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> que está marcado de color rojo en este código ya no es necesario poner solo esta línea de código, y si no utilizas ningún jQuery, inserta todo el código tal como lo mostré.

6 Ahora damos un clic en “Guardar plantilla”

7 Nos dirigimos a “Diseño”

8 Da un clic en “Añadir un gadget” ábrelo

9 Busca el widget que dice “HTML/Javascript” ábrelo

Ingresa las siguientes líneas de código en su interior

<div id='featuredContent'> <div class='sliderwrapper' id='featured-slider'> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts3\"><\/script>"); </script> </div> <div id='paginate-featured-slider'> <ul> <script> document.write("<script src=\"/feeds/posts/default?max-results="+numposts3+"&orderby=published&alt=json-in-script&callback=showrecentposts4\"><\/script>"); </script> </ul> <div class='clear'></div> </div> <script type='text/javascript'> featuredcontentslider.init({ id: "featured-slider", //id of main slider DIV contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"] toc: "markup", //Valid values: "#increment", "markup", ["label1", "label2", etc] nextprev: ["", ""], //labels for "prev" and "next" links. Set to "" to hide. revealtype: "mouseover", //Behavior of pagination links to reveal the slides: "click" or "mouseover" enablefade: [true, 0.4], //[true/false, fadedegree] autorotate: [true, 5000], //[true/false, pausetime] onChange: function(previndex, curindex){ //event handler fired whenever script changes slide //previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc) //curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc) } }) </script> </div>

Eso es todo de un clic en “Guardar”

Ubique su nuevo widget Slideshow en la parte superior de su blog o arriba de las entradas de su blog de Blogger.

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Slideshow

Share:

Luis Chávez

Soy el fundador del sitio web Ayudadeblogger.com - Considerado un Pro Blogger profesional, Consultor SEO y desarrollador Web adicto, ejecuto una serie de sitios web desde mi Oficina Quito-Ecuador.