¿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(http://3.bp.blogspot.com/_JUg9QsmKp5s/TMti6qq0QxI/AAAAAAAAAYs/85Em1FsewNI/s000/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(http://4.bp.blogspot.com/-tqgCwE1of2Y/VagHmJJ9r0I/AAAAAAAAJEY/eftLYDYnabU/s1600/izquierda-ayudadeblogger.gif);
position:absolute;
left:5px;bottom:65px;
}
.nextb{
float:right;
width:24px;
height:24px;
z-index:200;
background:url(http://3.bp.blogspot.com/-iMMv-PYE4-U/VagHq-zr3KI/AAAAAAAAJEg/ZxuLb1IzKmA/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'> //< + 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(".mygallery").jCarouselLite({
btnNext: ".nextb",
btnPrev: ".prevb",
visible: 5,
speed: 1000,
easing: "backout"
});
});
</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='http://3.bp.blogspot.com/-tP0Ar69OCCo/VagDxwHW5CI/AAAAAAAAJDk/Hv2Y161w9N8/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='http://4.bp.blogspot.com/-l5awXDhNWz8/VagDyAPyesI/AAAAAAAAJDs/I2AQtB6WGtg/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='http://2.bp.blogspot.com/-OmS7hNJvVNE/VagDxxZaHmI/AAAAAAAAJDo/906mMZxbE54/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='http://1.bp.blogspot.com/-6B2pMytNspM/VagDyj1T4OI/AAAAAAAAJD8/Q1lfM6wOmgY/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='http://2.bp.blogspot.com/-GdLO5dRiIzA/VagD6lFuS2I/AAAAAAAAJEM/7iAVn9GWCv4/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='http://1.bp.blogspot.com/-W_xk3juBGtw/VagDzPajlGI/AAAAAAAAJEA/2m17z9vDJyg/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='http://2.bp.blogspot.com/-OmS7hNJvVNE/VagDxxZaHmI/AAAAAAAAJDo/906mMZxbE54/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”
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
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
ResponderEliminarHecho que me suscrito a tu canal mil gracias he
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.
EliminarSaludos.