add

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.


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

Slideshow para Blogger ¿Cómo crear?

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


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

DEMO

¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Da un clic en “Plantilla

Slideshow para Blogger ¿Cómo crear?

3 Un clic en “Editar HTML

Slideshow para Blogger ¿Cómo crear?

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

Slideshow para Blogger ¿Cómo crear?

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.

Slideshow para Blogger ¿Cómo crear?

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(http://4.bp.blogspot.com/-bp2HK6MdDXg/T5aB6vI5GPI/AAAAAAAAF98/gwCsmb8Fcks/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}


Slideshow para Blogger ¿Cómo crear?

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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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é.

Slideshow para Blogger ¿Cómo crear?

6 Ahora damos un clic en “Guardar plantilla

Slideshow para Blogger ¿Cómo crear?

7 Nos dirigimos a “Diseño

Slideshow para Blogger ¿Cómo crear?

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

Slideshow para Blogger ¿Cómo crear?

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

Slideshow para Blogger ¿Cómo crear?

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>


Slideshow para Blogger ¿Cómo crear?

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.

Slideshow para Blogger ¿Cómo crear?

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

emailEnviar por correo

5 comentarios:

  1. he estado poniendo gadgets a mi blog y se me hacen muy buenos pero tengo un problema con ellos, he usado dos el menu desplegable y el slide show pero ninguno de los dos me funciona bien supongo que por como pegue el codigo pero no he podido solucionarlo me gustaria saber si podrias mirar mi blog y ayudarme porfavor.

    http://schoncountry-oficial.blogspot.com/

    muchas gracias

    ResponderEliminar
  2. Muchas gracias por este fantástico slideshow.
    Lo he insertado en mi blog: http://atentamente-carmen.blogspot.com.es/, siguiendo sus instrucciones, el único problema es que las imágenes quedan demasiado anchas y por tanto desvirtuadas, ¿cómo podría solucionarlo? Gracias de antemano.

    ResponderEliminar
  3. Hola, puedes poner un numero diferente para el ancho de la imagen en estos tres lugares: width:800px cambia el numero 800 por el número que tú quieras, en los tres lugares que aparece este código: width:800px, además cambia en esta parte del código también: width:815px, eso es todo, con eso cambiara el tamaño del ancho de tu slideshow. Saludos.

    ResponderEliminar
  4. Luis hola si lo hice ajuste el with pero el problema es el alto que le di de mas y no responde me podrias ayudar gracias

    ResponderEliminar
  5. Hola.. Quiero que solo me aparezcan artículos de un label específico.. ¿Dónde de la líneas modifico? Gracias por tu ayuda.

    ResponderEliminar

Discusión

person_pin Luis Chávez

group_work Fundador

contact_phone +593 994589032

email ayudadeblogger@gmail.com

Entradas populares

Youtube.com/ayudadeblogger

Suscríbete

Etiquetas

Adsense dispositivos moviles (2) Alojamiento web (12) Aplicaciones moviles (15) Backlinks (1) Breaking News para Blogger (3) Como (33) Como crear una pagina web gratis (8) Comprar Dominios (2) Comprar un Dominio en Godaddy (2) Configurar dominio de Godaddy en Blogger (1) Consejos de Blogs (33) Consejos de Trafico (12) Correo Dominio (3) Crear un Sitemap (6) Crear una Aplicacion gratis (2) Diseno Responsive (5) Diseño Web (7) En vivo (1) Entradas Populares (18) Enviar Sitemap a Bing y Yahoo (1) Error al analizar XML (5) Facebook trucos (10) Firefox (9) Formulario de contactos (3) Ganar Dinero (22) Google (11) Google Adsense (10) Google Plus (5) Guia de SEO (2) Herramientas Blogger (4) Herramientas para Webmasters (6) Iconos Font Awesome (1) Info Tech (1) La ética de los blogs (2) Laptops (2) Manual Blogger (11) Material Design Blogger (2) Medios de Comunicacion Social (39) Menu desplegable (20) Menu Responsive para Blogger (6) Mobile-friendly (9) Movil (12) Noticias (3) Optimizado para moviles (4) Plantillas Blogger (42) Plantillas Landing page para Blogger (3) Popout (6) Posicionamiento SEO (22) Publicidad (2) SEO Mobile (12) SEO para Moviles (14) Sitemap (1) Sitios web optimizados para moviles (3) Slider Carrusel (7) Slideshow (35) Smartphone (12) Social Media Marketing (1) Tácticas de Marketing (4) Tecnologia (12) Temas de invitados (2) Top Hosting (3) Trucos Blogger (40) Trucos CSS y HTML (11) Web Hosting (14) Widget Acordeón (3) Widget Tab Multiple (1) Widgets para Blogger (69) Widgets Suscripciones (9) Widgets y Plugins (6)

Formulario de contacto

Nombre

Correo electrónico *

Mensaje *

Seguidores

Comentarios