add

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.

Como insertar un Slider Carrusel en blogger

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

  1. Como agregar a mi blog de blogger un Slideshow automatico
  2. Como crear un Slideshow manual para mi blog de blogger
  3. Como crear una galería de imágenes para Blogger online Gratis – Como crear un Slideshow gratis para blogger
  4. Como hacer un Slideshow Carrusel basado en etiquetas para blogger
  5. Como insertar un Slideshow en Blogger simples pasos
  6. Galería de imágenes para blogger
  7. Galería de imágenes para blogger V3
  8. Instalar un Slideshow para blogger con un solo widget
  9. Mostrar un Slideshow con mis entradas populares para blogger
  10. Necesito un Slider para mi blog de blogger
  11. Nuevo estilo de Slideshow para blogger
  12. SlideShow con control deslizante para blogger
  13. Slider carrusel para blogger
  14. Slider para blogger en 3D
  15. Slideshow con Entradas Populares Nuevo estilo
  16. Slideshow de Popular post o Entradas polulares para mi blog de blogger
  17. Slideshow para Blogger
  18. Slideshow para blogger blogspot con etiquetas
  19. Slideshow para blogger con un solo widget
  20. Slideshow para blogger manual nuevo estilo
  21. Slideshow para blogger nuevo estilo
  22. Slideshow vertical para usarlo en blogger
  23. Widget Galería de Imágenes para blogger V2
  24. Widget Slider galería de imágenes acordeón para blogger
  25. Widget Slideshow para blogger
  26. 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

1 Ir a blogger

2 Da un clic en “Plantilla

Como insertar un Slider Carrusel en blogger

3 Un clic en “Editar HTML

Como insertar un Slider Carrusel en blogger

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

Como insertar un Slider 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.

Como insertar un Slider Carrusel en blogger

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='http://yourjavascript.com/265232511102/carousellite.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 tendras 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

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

Como insertar un Slider Carrusel en blogger

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

Como insertar un Slider Carrusel en blogger

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

Como insertar un Slider Carrusel en blogger

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

<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 dale un clic en “Guardar plantilla

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

Fácil verdad!

Recuerda suscribirte y recibiras mis nuevas acutualizaciones directamente en tu correo electrónico

¿Necesitas ayuda?

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

Saludos

emailEnviar por correo

10 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

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 (33) 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 (11) 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