Como insertar un Slider Carrusel en Blogger


Quieres insertar un Slider Carrusel en tu blog de blogger y no sabes cómo hacerlo o tal vez ya lo hiciste y te produce un error en el código o no sabes muy bien cómo funciona este truco para Blogger! Ayudadeblogger.com te presenta un espectacular Slider Carrusel para que lo utilices en tu blog de blogger de una forma rápida y sencilla, la cual no le causara ningún error en la estructura de tu plantilla. Este nuevo Slider Carrusel para blogger funciona perfectamente en todos los navegadores web como, Google Chrome, Internet Explorer, Firefox etc. Lo que va a mostrar nuestro Slider Carrusel será las 12 últimas publicaciones que hayamos publicado en nuestro blog de blogger, con esto aumentara las vistas de los usuarios que visitan su blog. Una forma muy útil para los blogs. Bueno no voy hacer muy larga esta explicación.

Si necesitas obtener diferentes tipos de Slideshow para blogger, te invito a que visites los siguientes post

Como agregar a mi blog de Blogger un Slideshow automático
Como crear un Slideshow manual para mi blog de Blogger
Como crear una galería de imágenes para Blogger online Gratis
Como hacer un Slideshow Carrusel basado en etiquetas para Blogger
Como insertar un Slideshow en Blogger simples pasos
Galería de imágenes para Blogger
Galería de imágenes para Blogger V3
Instalar un Slideshow para Blogger con un solo widget
Mostrar un Slideshow con mis entradas populares para Blogger
Necesito un Slider para mi blog de Blogger
Nuevo estilo de Slideshow para Blogger
SlideShow con control deslizante para Blogger
Slider carrusel para Blogger
Slider para Blogger en 3D
Slideshow con Entradas Populares Nuevo estilo
Slideshow de Popular post o Entradas polulares para mi blog de Blogger
Slideshow para Blogger
Slideshow para Blogger blogspot con etiquetas
Slideshow para Blogger con un solo widget
Slideshow para Blogger manual nuevo estilo
Slideshow para Blogger nuevo estilo
Slideshow vertical para usarlo en Blogger
Widget Galería de Imágenes para Blogger V2
Widget Slider galería de imágenes acordeón para Blogger
Widget Slideshow para Blogger
Widget para Blogger, Slideshow con Entradas Populares

A continuación mire su demostración en mi blog de demos Les gusto verdad!

Vamos a trabajar

Video Tutorial



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.


4 Busca este código

]]></b:skin>

Una vez que hayas encontrado el código, tendrás que insertar las siguientes líneas de código arriba del código que encontraste

#carousel {background:url();width: 970px; position: relative; float: left; margin:0 0 10px 0;height:230px;overflow:hidden;}
#carousel .judul{margin-left:10px;font:18px Oswald;padding:5px;color:#422929}
#carousel .container {position: absolute;left: 0px;width: 970px;overflow:hidden;}
#carousel ul{width:10000px;position: relative;overflow:hidden;margin-top:0px;}
#carousel ul li {display: inline; float: left; margin:1px 0px 2px 10px; padding:1px; width: 180px; overflow: hidden;height:178px}
#carousel .thumb{height:128px;width: 170px;background:#fff;padding:4px;border:1px solid #ccc;box-shadow:0 0 4px #bbb;-moz-box-shadow:0 0 4px #bbb;-webkit-box-shadow:0 0 4px #bbb;}
#carousel  #previous_button { position: absolute; top:8px;right: 39px; width: 25px; height: 22px; cursor: pointer; background: url(http://4.bp.blogspot.com/-IkX_jjs9Gls/UTYfxPvaEtI/AAAAAAAACbU/S4cXeti3S-I/s1600/paginate.png) no-repeat; background-position: 0 0; }
#carousel #next_button { position: absolute; top:8px; right:10px; width: 25px; height: 22px; cursor: pointer; background: url(http://4.bp.blogspot.com/-IkX_jjs9Gls/UTYfxPvaEtI/AAAAAAAACbU/S4cXeti3S-I/s1600/paginate.png) no-repeat; background-position: -27px 0; }
#carousel #next_button:hover, #previous_button:hover { -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=80)"; filter: alpha(opacity=80); opacity: 0.8; transition: opacity .25s ease-in-out; -moz-transition: opacity .25s ease-in-out; -webkit-transition: opacity .25s ease-in-out; }
#carousel ul li a.slider_title{color:#422929;display:block;text-align:center;font:bold 12px Arial;margin-top:8px}
#carousel ul li a.slider_title:hover{color:#111}

/* Slide Content

----------------------------------------------- */

.slide1-wrapper {padding:0 auto;margin:0 auto;width:auto;float: left; word-wrap: break-word; overflow: hidden;}
.slide1 ul {list-style:none;margin:0;padding:0;}
.slide1 .widget {margin:0}
#bot-wrapper {padding-top:10px;width:970px;float:left;word-wrap:break-word;overflow:hidden}
#bot1-wrapper{width:620px;float:left;word-wrap:break-word;overflow:hidden}
#bot2-wrapper{padding-left:10px;width:340px;float:right;word-wrap:break-word;overflow:hidden}
.bot .widget,.bot1 .widget,.bot2 .widget{margin:0;padding:0 0 8px}
.bot ul,.bot1 ul,.bot2 ul {list-style:none;margin:0 0 0;padding:0 0 0;}


5 Busca este otro código

</head>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js' type='text/javascript'/>
<script src='https://cdn.rawgit.com/grupodelecluse/jcarousellite-js/a56b46c7/.gitignore/.js' type='text/javascript'/>

<script type='text/javascript'>

//<![CDATA[

imgr=new Array();imgr[0]=" ";showRandomImg=true;aBold=true;summaryPost = 100;summaryPost1 = 200;numposts=6;numposts1=10;numposts2=6;numposts6=3;Title1="Adventure";Title2="Action";Title3="Bike Game";Title4="Dress-Up";Title5="Strategy";Title6="Sport Game";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 showrecentposts0(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;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;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Enero","Febrero","Marzo","Abril","Mayo","Junio","Julio","Agosto","Septiembre","Octubre","Noviembre","Diciembre"];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=m+' '+day+' '+y;var trtd='<div class="crott"><a href="'+posturl+'">'+posttitle+'</a><p>'+removeHtmlTag(postcontent,summaryPost1)+'... </p></div>';document.write(trtd);j++}}function showrecentposts(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts;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;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","Dic"];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='<a href="'+posturl+'"><img src="'+img[i]+'"/></a>';document.write(trtd);j++}}

function showrecentposts2(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts1;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;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","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 class="car"><div class="thumb"><a href="'+posturl+'"><span class="play-dong"></span><img width="170" height="128" src="'+img[i]+'"/></a></div><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>';document.write(trtd);j++}}

function showrecentposts1(json){j=(showRandomImg)?Math.floor((imgr.length+1)*Math.random()):0;img=new Array();for(var i=0;i<numposts2;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;var month=[1,2,3,4,5,6,7,8,9,10,11,12];var month2=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","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="column"><a href="'+posturl+'"><span class="play-button"></span><img class="column_img" src="'+img[i]+'"/></a><h2><a href="'+posturl+'">'+posttitle+'</a></h2></div>';document.write(trtd);j++}}

//]]>
</script>



Nota: Si ya utilizas un script jQuery ya no tendrás que poner solo el código que esta marcado de color amarillo, y si no utilizas ningun jQuery inserta todo el código tal como esta

6Ahora con mucho cuidado vamos a dar un clic en la pestaña que dice “Ir al widget”, mire la imagen

Y vamos a dar un clic en el “Header1” para que nos muestre el código directamente en donde tendremos que insertar nuestra última línea de código


Al dar un clic en “Header1” nos mostrara un código como el siguiente, mira la imagen


En este punto con calma vamos a buscar la última línea del cierre que dice </div> en el cual abajo de ella vamos a insertar el siguiente código, si no lo encuentran, trate de buscar un lugar adecuado y probar con la inserción del código.

<div id='slide1-wrapper'>
<div id='carousel'>
<div class='judul'>Slider Carrusel</div>
<div id='previous_button'/>
<div id='next_button'/>
<div class='container'>
<ul>
<script>

document.write(&quot; &lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts2\&quot;&gt;&lt;\/script&gt;&quot;);

</script>       

</ul><div class='clear'/>
</div>

<div class='clear'/>
</div>
<script type='text/javascript'>

 (function($) { $(document).ready(function(){

 $(&quot;#carousel .container&quot;).jCarouselLite({

     auto:0,

     scroll: 1,

     speed: 400,   

     visible: 5,

     start: 0,

     circular: false,

     btnPrev: &quot;#previous_button&quot;,

     btnNext: &quot;#next_button&quot;

                               });

        })})(jQuery) 

</script>
</div>


Eso es todo ahora de un clic en “Guardar Tema”

Mira tu nuevo Slider Carrusel para Blogger insertado debajo de la cabecera principal de tu blog de Blogger

Fácil verdad!

Recuerda suscribirte y recibirás mis nuevas actualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

Cualquier pregunta no duden en hacérmelo saber y de inmediato les responderé

Saludos

Recuerda suscribirte:

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



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

20 comentarios:

  1. los botones de anterior y siguiente no me funcionan por que sucede esto

    ResponderEliminar
  2. parte del codigo en el css esta incompleto

    ResponderEliminar
  3. hola amigo una pregunta no encuentro el ultimo codigo no me sale nada que se le paresca me podras dar otra referencia

    ResponderEliminar
  4. Hola, queria saber si hay forma de poner un carrusel de imagenes dentro de una entrada. Porque solo me deja insertarlas y quedan todas desordenadas. Es posible? slds!

    ResponderEliminar
  5. Hola! hay un problema con el slider, cuando hago click sobre una entrada (en el slider) me lleva a una pagina "protector link blogspot" algo asi, cuando tendria que mostrar la entrada a la cual hice click, por que?

    ResponderEliminar
    Respuestas
    1. Hola, por favor cual es la dirección URL de su blog, tal ves algo este haciendo mal, siga las instrucciones tal como lo muestro en este post.

      Saludos.

      Eliminar
  6. que tal Luis, un excelente blog el que tienes, tengo un problema con un blog, resulta que no logro hacer que funcione este slider, la dirección del blog es
    http://pelischapinseries.ga

    también puedes ver el código de la plantilla acá
    http://paste.ofcode.org/pfCHcjPkN8cZUiVcvBHeSR

    Gracias por la ayuda

    ResponderEliminar
    Respuestas
    1. Hola, gracias por escribir, he visitado su blog y veo que si se muestra el slideshow, pero el problema es que no se muestran las imágenes, por favor pruebe con lo siguiente,

      Un clic en Configuración

      Un clic en Otros

      Justo a lado derecho de su panel encontrara la siguiente palabras:

      Feed del sitio

      Y mas abajo lo siguiente:

      Permitir feed de blog

      Seleccione la opción que dice Completo

      Eso es todo, un clic en la parte superior derecha que dice Guardar configuración

      Ahora visite su blog y mire si le muestra las imágenes en el slideshow

      Saludos.

      Eliminar
  7. Mil gracias, efectivamente ese era el problema, había revisado todo el código pensando que era un error mío pero al final era en configuraciones. Saludos

    ResponderEliminar
  8. Saludos en ese codigo donde coloco los url de mis imagenes?

    ResponderEliminar
    Respuestas
    1. Hola Karina, con respecto a su pregunta tal como lo dice el tutorial:

      Lo que va a mostrar el Slider Carrusel será las 12 últimas publicaciones que hayamos publicado en nuestro blog de Blogger.

      No necesitara ingresar ninguna URL de imágenes

      Saludos

      Eliminar
  9. Hola, He vistos carrusel algo similar y que se mueven hacia delante y atrás de forma automática como el caso que se muestra aquí - http://newsflavour.blogspot.com/

    ¿Es posible aplicarle un efecto similar a tu carrusel?

    Gracias.

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a su pregunta, todo es posible en la plataforma de Blogger, se tendrá que realizar unos cambios para que produzca este efecto, sera en futuras publicaciones en los cuales publicare nuevos slideshow carrusel para uso exclusivo en Blogger.

      Saludos

      Eliminar
  10. hola, hize todos los pasos tal como esta y me sale horrible! como hago este es mi pagina blogger http://www.onlineydescargas.com/, podria ayudarme? he estado probando varios y nada que queda bien

    ResponderEliminar
    Respuestas
    1. Hola Ang, sobre su pregunta he actualizado este tutorial, por favor vuelva a realizar lo indicado,

      Saludos

      Eliminar
  11. Hola! Muchas gracias por el articulo super interesante! Tengo un problema con mi widget, esta instalado y funciona bien. El problema se presenta en cuanto publico un articulo reciente, desaparece. En cuanto le doy a restablecer el articulo, vuelve a aparecer. Alguna idea de donde puede venr el problema?
    Muchas gracias por la ayuda !

    ResponderEliminar
    Respuestas
    1. Hola Ade, sobre su pregunta, tal vez algo este realizando mal, lo que indica no debe suceder ni afectar ninguna función de su blog

      Saludos

      Eliminar
  12. Ola amigo todo bien pero el carrusel me sale en el pie de la pagina yo quisiera que me muestre solo cuando entran a una entrada

    ResponderEliminar