Home Slider Carrusel Como insertar un Slider Carrusel en Blogger

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

TAGS:


Share:

Related post

Comentarios

20 comentarios: