add

¿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.

¿Cómo insertar un Slideshow Carrusel en Blogger?

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

DEMO

¡Te gusto verdad!

Vamos a trabajar

1 Ir a Blogger

2 Un clic en “Plantilla

¿Cómo insertar un Slideshow Carrusel en Blogger?

3 Un clic en “Editar HTML

¿Cómo insertar un Slideshow Carrusel en Blogger?

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

¿Cómo insertar un Slideshow Carrusel en Blogger?

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.

¿Cómo insertar un Slideshow Carrusel en Blogger?

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'>
//<![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='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

¿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





2 comentarios:

  1. 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. 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

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 (32) 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 (10) 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