Home Slider Carrusel ¿Cómo insertar un Slideshow Carrusel en Blogger?

¿Cómo insertar un Slideshow Carrusel en Blogger?

¿Agregar de forma fácil un Slideshow carrusel en mi blog de Blogger sin complicaciones? ¿Slideshow carrusel para Blogger pasos sencillos? Video Tutorial – En este nuevo post de Ayuddeblogger.com vamos aprender a como insertar correctamente un código con el cual nos mostrara un Slideshow carrusel, en la que insertaremos, imágenes, un título y una dirección URL del post que vamos a dar a conocer en nuestro Slideshow carrusel. Este Slideshow carrusel funciona de forma manual, esto quiere decir que si necesitas cambiar de imagen, de título y de dirección URL lo debes hacer de forma manual ingresando en el Editor HTML de nuestra plantilla.

Vamos a insertar este Slideshow carrusel justo debajo de la cabecera principal de nuestro blog, esto quiere decir que se mostrara debajo de nuestro menú principal.

He creado un video tutorial el cual explica claramente como insertar los códigos correctamente en nuestra plantilla, pueden verlo a continuación


Mire su demostración en el siguiente blog de demos
¡Te gusto verdad!


1 Un clic en Tema


2 Un clic en “Editar HTML”


Ahora se le abrirá el Editor HTML de su plantilla


En este punto deberás presionar la tecla “Control” de su teclado seguido de la tecla “F” para que aparezca el buscador integrado en la parte superior derecha de su editor, 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 le muestra como debe aparecerle el buscador en el editor HTML de su plantilla y así pueda colocar el código en el buscador al momento que yo diga busca este código.


Busca este código

]]></b:skin>

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

#slidearea{
height:150px;
overflow:hidden;margin:-20px 0px 0 2px;
position:relative;
width:965px;
background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmygMSACj8B3S8XjUDgwqkPqCgUkIz8adjpOao5Y7OcNWzYrqGsGJTqnOySI0cgTkkcXcfAf3cSYxz9ULYIhl5WloTvl41KqFaJ0Dt88ws2bce_mBlNPIi76msU0EzNuzs_lO7QJTGONWw/s0/header-background.png) repeat-x;
border:5px ridge #052844;
}
#gallerycover{
overflow:hidden;
margin:9px 20px 0 32px;
width:920px;
}
.mygallery{
overflow:hidden;
position:relative;
}
.mytext img{
float:left;
}
.mytext{
position:relative;
margin:0 5px 0 5px;
width:170px;
height:210px;
display:inline;
float:left;
color:#c4c4c4;
}
.inpost{
position:absolute;
top:0;
left:0;
width:250px;
background:#fff;
}
.mytext {
padding:5px 0;
color:#000;
width:170px;
font-size:12px;
font-weight:bold;
}
.mytext h4 a:link,.mytext h4 a:visited{
color:#000;
text-shadow: 0px 1px 0px #efefef;
}
.mytext p{
padding:0 0;
color:#555;
font-size:12px;
line-height:20px;
width:170px;
text-shadow:1px 1px 0 #f6f6f6;
}
.prevb{
float:left;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGd8vA08jYRmrQHqiDbwudU8WgtjJWqzGqk_c22ZbmqCixwYDIOvrYdu6KMZA-_mcMZmWaakkxg9-5REQV8TGk758kJYhml2siF5Zzd8gukqgl0QuCvP7dM9YL4UTFpuFjJFwEJPpHWHeJ/s1600/izquierda-ayudadeblogger.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhup0qtrcKPWfEvVabPEEfDoejue7hu2JmLSRPByw3eA0v8Snr3hnj8Ggcv0jNQAfmXWaIFEeKdbarUMgQmmA1maObPdWyE-jJDk6rql6zWzoxakI962a8SXXpJu5mE-RmM37P5D5wAVTZO/s1600/derecha-ayudadeblogger.gif);
position:absolute;
right:5px;
bottom:65px;
display:block;
}

4 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.4.2/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[

/*
 * jQuery Easing v1.1 - http://gsgd.co.uk/sandbox/jquery.easing.php
 *
 * Uses the built in easing capabilities added in jQuery 1.1
 * to offer multiple easing options
 *
 * Copyright (c) 2007 George Smith
 * Licensed under the MIT License:
 *   http://www.opensource.org/licenses/mit-license.php
 */

jQuery.easing = {
    easein: function(x, t, b, c, d) {
        return c*(t/=d)*t + b; // in
    },
    easeinout: function(x, t, b, c, d) {
        if (t < d/2) return 2*c*t*t/(d*d) + b;
        var ts = t - d/2;
        return -2*c*ts*ts/(d*d) + 2*c*ts/d + c/2 + b;       
    },
    easeout: function(x, t, b, c, d) {
        return -c*t*t/(d*d) + 2*c*t/d + b;
    },
    expoin: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        return flip * (Math.exp(Math.log(c)/d * t)) + b;       
    },
    expoout: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        return flip * (-Math.exp(-Math.log(c)/d * (t-d)) + c + 1) + b;
    },
    expoinout: function(x, t, b, c, d) {
        var flip = 1;
        if (c < 0) {
            flip *= -1;
            c *= -1;
        }
        if (t < d/2) return flip * (Math.exp(Math.log(c/2)/(d/2) * t)) + b;
        return flip * (-Math.exp(-2*Math.log(c/2)/d * (t-d)) + c + 1) + b;
    },
    bouncein: function(x, t, b, c, d) {
        return c - jQuery.easing['bounceout'](x, d-t, 0, c, d) + b;
    },
    bounceout: function(x, t, b, c, d) {
        if ((t/=d) < (1/2.75)) {
            return c*(7.5625*t*t) + b;
        } else if (t < (2/2.75)) {
            return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b;
        } else if (t < (2.5/2.75)) {
            return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b;
        } else {
            return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b;
        }
    },
    bounceinout: function(x, t, b, c, d) {
        if (t < d/2) return jQuery.easing['bouncein'] (x, t*2, 0, c, d) * .5 + b;
        return jQuery.easing['bounceout'] (x, t*2-d,0, c, d) * .5 + c*.5 + b;
    },
    elasin: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
    },
    elasout: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d)==1) return b+c;  if (!p) p=d*.3;
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b;
    },
    elasinout: function(x, t, b, c, d) {
        var s=1.70158;var p=0;var a=c;
        if (t==0) return b;  if ((t/=d/2)==2) return b+c;  if (!p) p=d*(.3*1.5);
        if (a < Math.abs(c)) { a=c; var s=p/4; }
        else var s = p/(2*Math.PI) * Math.asin (c/a);
        if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b;
        return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b;
    },
    backin: function(x, t, b, c, d) {
        var s=1.70158;
        return c*(t/=d)*t*((s+1)*t - s) + b;
    },
    backout: function(x, t, b, c, d) {
        var s=1.70158;
        return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
    },
    backinout: function(x, t, b, c, d) {
        var s=1.70158;
        if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b;
        return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b;
    },
    linear: function(x, t, b, c, d) {
        return c*t/d + b; //linear
    }
};

//]]>
</script>

<script type='text/javascript'>
//<![CDATA[

eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(6($){$.1g.1w=6(o){o=$.1f({r:n,x:n,N:n,17:q,J:n,L:1a,16:n,y:q,u:12,H:3,B:0,k:1,K:n,I:n},o||{});8 G.R(6(){p b=q,A=o.y?"15":"w",P=o.y?"t":"s";p c=$(G),9=$("9",c),E=$("10",9),W=E.Y(),v=o.H;7(o.u){9.1h(E.D(W-v-1+1).V()).1d(E.D(0,v).V());o.B+=v}p f=$("10",9),l=f.Y(),4=o.B;c.5("1c","H");f.5({U:"T",1b:o.y?"S":"w"});9.5({19:"0",18:"0",Q:"13","1v-1s-1r":"S","z-14":"1"});c.5({U:"T",Q:"13","z-14":"2",w:"1q"});p g=o.y?t(f):s(f);p h=g*l;p j=g*v;f.5({s:f.s(),t:f.t()});9.5(P,h+"C").5(A,-(4*g));c.5(P,j+"C");7(o.r)$(o.r).O(6(){8 m(4-o.k)});7(o.x)$(o.x).O(6(){8 m(4+o.k)});7(o.N)$.R(o.N,6(i,a){$(a).O(6(){8 m(o.u?o.H+i:i)})});7(o.17&&c.11)c.11(6(e,d){8 d>0?m(4-o.k):m(4+o.k)});7(o.J)1p(6(){m(4+o.k)},o.J+o.L);6 M(){8 f.D(4).D(0,v)};6 m(a){7(!b){7(o.K)o.K.Z(G,M());7(o.u){7(a<=o.B-v-1){9.5(A,-((l-(v*2))*g)+"C");4=a==o.B-v-1?l-(v*2)-1:l-(v*2)-o.k}F 7(a>=l-v+1){9.5(A,-((v)*g)+"C");4=a==l-v+1?v+1:v+o.k}F 4=a}F{7(a<0||a>l-v)8;F 4=a}b=12;9.1o(A=="w"?{w:-(4*g)}:{15:-(4*g)},o.L,o.16,6(){7(o.I)o.I.Z(G,M());b=q});7(!o.u){$(o.r+","+o.x).1n("X");$((4-o.k<0&&o.r)||(4+o.k>l-v&&o.x)||[]).1m("X")}}8 q}})};6 5(a,b){8 1l($.5(a[0],b))||0};6 s(a){8 a[0].1k+5(a,\'1j\')+5(a,\'1i\')};6 t(a){8 a[0].1t+5(a,\'1u\')+5(a,\'1e\')}})(1x);',62,96,'||||curr|css|function|if|return|ul|||||||||||scroll|itemLength|go|null||var|false|btnPrev|width|height|circular||left|btnNext|vertical||animCss|start|px|slice|tLi|else|this|visible|afterEnd|auto|beforeStart|speed|vis|btnGo|click|sizeCss|position|each|none|hidden|overflow|clone|tl|disabled|size|call|li|mousewheel|true|relative|index|top|easing|mouseWheel|padding|margin|200|float|visibility|append|marginBottom|extend|fn|prepend|marginRight|marginLeft|offsetWidth|parseInt|addClass|removeClass|animate|setInterval|0px|type|style|offsetHeight|marginTop|list|jCarouselLite|jQuery'.split('|'),0,{}))

//]]>
</script>


5 Busca este último código

<div id='content-wrapper'>

Ingresa las siguientes líneas de código justo abajo del código que encontraste

<div style='height:20px;width:100%;overflow:hidden;'/>
<script type='text/javascript'>
var $jx = jQuery.noConflict();
$jx(function() {
 $jx(&quot;.mygallery&quot;).jCarouselLite({
 btnNext: &quot;.nextb&quot;,
        btnPrev: &quot;.prevb&quot;,
    visible: 5,
    speed: 1000,
    easing: &quot;backout&quot;     
    });
});
</script>
<div id='slidearea'>
<div id='gallerycover'>
<div class='mygallery'>
<ul>
<li>
<div class='mytext'>
<a href='SLIDE-1-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJ3XzMLwUxZ-wOp7Qb4Vau53p4WgZ6Fl2OBgzkFjPf-Ag6GPYD7_681NbGx6IkuYdVKzIKtvY_P6wbgpXP-7FEXmk_kAHuD-hnJ8TS80lHltuzVEMetLyxn0AdJ3r_xr9hVGKnkpCy7Wz9/s1600/1.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-1-URL AQUI'>Aquí el nombre del artículo 1</a></p>
</div>     
</li>
<li>
<div class='mytext'>
<a href='SLIDE-2-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjU7UP8aPneKZSrYvTuzYf0W2Iz3IR_0ORXdKhHQfdkyI0FfqT7ghShvn-2cGQtFPU1HNBigHxbqNmmn7qpDfr2aTfL8GgLaQcVCmcL5pWy7o_HjpEQKJBA_dUlOotZB3jI1uJc49XU_Aoc/s1600/2.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-2-URL AQUI'>Aquí el nombre del artículo 2</a></p>
</div>     
</li>
<li>
<div class='mytext'>
<a href='SLIDE-3-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbl00YKexx8Q2fTqXoNZPafQECG-KNLtw0JPq0vuTst5To8dN7bgsqcV1lb-L3KnMJM6NSXvXvbYLSpKsP_HvfCjVXgTTsFrxs3N5i67KIYTppY-KZa6FCcmW-eqz6vs_4lmzlS51X-B7/s1600/3.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-3-URL AQUI'>Aquí el nombre del artículo 3</a></p>
</div>     
</li>
<li>
<div class='mytext'>
<a href='SLIDE-4-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhaF_QskFbFTpwI6lXJL8Z6hTcfCMi3jf-7Y6cPtw04ADVsop0mTBQTYwVilIzmiNTMbqYgjEcNFLL_UvZd_H0JYsau0SwbbPfHVCPiVFKzMf4YAs2OWBqIAtVYviyRQELpo4x5FOPrWZ3/s1600/4.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-4-URL AQUI'>Aquí el nombre del artículo 4</a></p>
</div>     
</li>
<li>
<div class='mytext'>
<a href='SLIDE-5-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjz-VzeAjFCa-pSWgQFz7Hoq6uvq70Rif-B1EG5setoQrXAJ9tOf8xuvzom3EY9bKx5B01-1bbjJKJHMq3fuyo0-4g9FYl6nV-bwIE65o-qBqoN8EBA2B-OS60vuGU4ZKaIwViKyyyXHUo1/s1600/5.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-5-URL AQUI'>Aquí el nombre del artículo 5</a></p>
</div>     
</li>
<li>
<div class='mytext'>
<a href='SLIDE-6-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEig_5dtfDaG4VlqLXozdE5cO-U5C5RMX4CMrm-8fkyDi6gJF-SdlwmqbA_3FYr93enkMqJS9NprKD5D5OWsr5VVX-oyzz7x_voQXupNUbrM4qFUox4U7aMmeMvYrid-3sXfFpIVcLMwSzQJ/s1600/6.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-6-URL AQUI'>Aquí el nombre del artículo 6</a></p>
</div>     
</li>
<li>
<div class='mytext'>
<a href='SLIDE-7-URL AQUI'>
<img class='sidim' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZbl00YKexx8Q2fTqXoNZPafQECG-KNLtw0JPq0vuTst5To8dN7bgsqcV1lb-L3KnMJM6NSXvXvbYLSpKsP_HvfCjVXgTTsFrxs3N5i67KIYTppY-KZa6FCcmW-eqz6vs_4lmzlS51X-B7/s1600/3.jpg'/>
</a>
<div class='clear'/>
<p align='center'><a href='SLIDE-7-URL AQUI'>Aquí el nombre del artículo 7</a></p>
</div>     
</li>
</ul>
<div class='clear'/>  
</div>
</div>
   <a class='prevb' href='#'/>
   <a class='nextb' href='#'/>
</div>


Realiza los siguientes cambios:

He marcado de tres diferentes colores donde deben de realizar sus respectivos cambios

Debes cambiar los nombres que están marcados de color rojo SLIDE-1-URL AQUÍ por la dirección URL del post que vas a dar a conocer en el Slideshow carrusel

Borra las direcciones URLs que están marcadas de color azul, y remplázalos por las direcciones URLs de tus imágenes, les recuerdo que las imágenes deben tener una dimensión de 170 x 100 pixeles, si no organizan correctamente el tamaño de sus imágenes se verán mal al momento de mostrarse.

Por ultimo cambia todos los nombres que están marcados de color verde “Aquí el nombre del artículo” y remplázalos por el título que quieras mostrar.

Eso es todo, es momento de dar un clic en “Guardar plantilla”

¿Cómo insertar un Slideshow Carrusel en Blogger?

Ahora diríjase a su blog y mire cómo funciona este espectacular Slideshow carrusel en su blog de Blogger

¡Fácil verdad!

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber

Si necesitas más trucos sobre Slideshow carrusel, les dejo los enlaces





Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE
¿Te ha resultado útil este artículo, recomiendanos?
Si

TAGS:


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.

Related post

Comentarios

2 comentarios:

  1. bloger prueba4 de febrero de 2016, 14:42

    Felicitaciones por el aporte me salió igual al tuyo pero me gustaría que esas imágenes se deslicen solas cada ciertos segundos algo así como un slider seria genial si me ayudarías con eso te dejo mi correo cutermuse@liv.com también puedes publicarlo debajo tu web para poder editarlo igual con la indicaciones gracias muy amable por tu aporte HTML
    Hecho que me suscrito a tu canal mil gracias he

    ResponderEliminar
    Respuestas
    1. Ayudadeblogger5 de febrero de 2016, 12:55

      Hola, con respecto a su pregunta tratare de publicar un nuevo tutorial a futuro sobre un slideshow carrusel que se mueva automáticamente, mientras tanto el slideshow carrusel que se encuentra en este tutorial solo funciona tal como lo muestro en es post, no se lo puede cambiar al modelo que usted solicita.

      Saludos.

      Eliminar