add

Como hacer un Slideshow Carrusel basado en etiquetas para blogger


En este tutorial voy a mostrar un truco tan sencillo de cómo crear un slider carrusel automático basado en sus etiquetas para uso exclusivo en blogger. Todo lo que necesitaran hacer es solo sustituir un nombre con su propia etiqueta y el regulador del slider carrusel funcionará sobre la base de la etiqueta que se agrega en la Edición de HTML. El uso de este slider carrusel es muy sencillo y sólo utilizaran un guión de jCarousellite sin la adición de efectos de aceleración o rueda del ratón. Los efectos son automáticos y para realizar este truco es muy simple. En mis publicaciones anteriores publique algunos tipos de Slideshow automáticos que sirven para mostrar sus ultimas entradas de blogger, les dejo algunos de los enlaces para que los vean.

Como hacer un Slideshow Carrusel basado en etiquetas para blogger

Slidesow con entradas populares
Mostrar un Slideshow con mis entradas populares
Slideshow con control deslizante para blogger
Slideshow con popular post 
Slideshow con un diseño renovado   
Slideshow automatico 
Slideshow Manual 

A continuación mira la demostración del Slider Carrusel en mi blog de demos


Bueno ya han visto la demostración del Slider Carrusel en mi blog de demos, ahora nos dirigimos a insertar los códigos, he tratado de ser lo mas explicativo posible para que ustedes no tengan ningún inconveniente al momento de seguir las instrucciones.

1 Ir a blogger

2 Da un clic en el icono de “Plantilla”, luego otro clic en “Editar HTML

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


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.













3 Busca este código ]]></b:skin>

4 Insertar enzima de ]]></b:skin> el siguiente código

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:895px;height:185px;overflow:hidden;background:url(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/s1600/main.png) repeat-x top;display:inline;float:left;text-align:center;font-weight:700;font-size:.9em;line-height:1.2em;border:1px solid #ccc;width:145px;height:150px;margin:0 4px 20px 7px;padding:6px;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;}
#carousel ul li:hover{filter:alpha(opacity=75);opacity:.75;}
#carousel ul li a.slider_title{color:#222;display:block;margin-top:5px}
#carousel ul li a.slider_title:hover{color:#cd1713}
#carousel a img{display:block;background:#fff;margin-top:0}


Los números que están marcados de color azul width:950px;height:185px, usted podrá cambiar por la anchura y la altura que quiera mostrar en su blog. Esto sirve para hacerle más grande o más pequeño a nuestro Slider Carrusel.

5 Ahora vamos a buscar este código </head> y enzima de el insertamos el siguiente código


<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script src='
http://yourjavascript.com/30533011062/jCarouselLite.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/s1600/no+image.jpg";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryTitle = 25;

numposts1 = 15;
label1 = "Widgets";

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 showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
document.write('<ul>');
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;
//cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
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+'"><img width="145" height="100" class="alignnone" src="'+img[i]+'"/></a></div><p><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></p></li>';

document.write(trtd);
j++;
}
document.write('</ul>');
}
//]]>
</script>

Realice estos cambios:

Como podrán observar el código que se encuentra marcado de un color rojo, es la última serie del código de script jQuery.min.js que utilizo para hacer este control. Y si usted ha encontrado en su blog el código jQuery.min.js, estos son diferentes series de la plantilla, en el cual ya no tendrá que insertar el código que esta marcado de color rojo, pero en si, en muchas plantillas de blogger no vienen con este código, así que realice todos los pasos que les estoy indicando. Recuerde que solo debe haber un solo jQuery.min.js en su plantilla, ya que este corresponde al número de serie.
Usted también podrá cambiar el numero de imágenes que quiera que se muestre en su Slider Carrusel, solo deberá cambiar en la parte que dice numposts1 = 15 y cámbielo por el numero de imágenes que quiera que se muestre.
En el código que dice label1 = "Widgets"; cambia el nombre que se encuentra de color azul por el nombre de la etiqueta que quiera mostrar. Por ejemplo, yo elegí Widgets porque quiero mostrar las etiquetas que se encuentran bajo esa categoría.

6 Luego busca este código <div id='main-wrapper'> y enzima de el inserta el siguiente código

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/&quot;+label1+&quot;?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts\&quot;&gt;&lt;\/script&gt;&quot;);
</script>   
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$(&quot;#carousel .container&quot;).jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,   
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: &quot;#previous_button&quot;,
    btnNext: &quot;#next_button&quot;
    });
    })})(jQuery)   
</script>
</b:if>

Recuerda que también puedes poner este código en la parte inferior de la barra de navegación o también se puede colocar en el costado pie de página, ya todo dependen de sus necesidades.

7 Dale un clic en “Guardar plantilla” y listo mira tu nuevo y renovado Slider Carrusel en tu blog de blogger.

Espero les haya sido de mucha ayuda, y haber sido lo mas explicativo posible.

¿Necesitas ayuda?

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

Saludos.

130 comentarios:

  1. no puedo encontrar div id='main-wrapper' qué hago en esa situación?

    ResponderEliminar
    Respuestas
    1. Perdon por la intromisión, no se si alguien ya respondio pero será debido a que es una plantilla nueva. En este caso ha de ponerse ese código debajo de div class='region-inner tabs-inner'

      Eliminar
    2. Hola Iñaki: ¿y si quisiera ubicarlo en la columna lateral?

      Eliminar
  2. Hola Crostyles, el codigo div id='main-wrapper' esta de ley en tu codigo html, talvez no estas extendiendo la plantilla de artilugios. Si necesitas mas ayuda solo hasmelo saber y cuentame como estas insertando los codigos ya que este tutorial es tan sencillo de utilizarlo, pero tambien necesito que te asegures que este activo tu widget de etiquetas y luego de eso realizar los pasos que les estoy indicando en este tutorial sobre como realizar un slideshow basado en etiquetas

    ResponderEliminar
  3. puedo hacer que salgan las entradas de otro blog

    ResponderEliminar
  4. Hola, con respecto a su pregunta si se lo puede hacer pero añadiendo un widget el cual enlaza a su otro blog.
    Saludos.

    ResponderEliminar
  5. Muchisimas gracias seria usted tan amable de decirme como hacerlo. Mil gracias por anticipado su post es muy bueno y si pudiera conseguir eso que le pido seria fantastico

    ResponderEliminar
  6. Hola, es muy facil, si quiere lo puedo ayudar por interno, comuniquese con migo a esta direccion de email: ayudadeblogger@gmail.com
    Y le podre explicar como hacerlo
    Saludos

    ResponderEliminar
  7. disculpen engo un problema como ago para que sea visible en las entradas tambien osea una ves dando a una entrada se quita el carusel y quiero que no lo aga si alguien me pudiera ayudar con que codigo ago eso o algo por el estilo se los agradesco mucho

    ResponderEliminar
  8. Hola Hertey, necesito que me envies la direccion de tu blog para poder ver lo que tu dices y poder darte las instrucciones a seguir.
    Saludos.

    ResponderEliminar
  9. ok bro este es mi blog de pruebas aqui es donde los estoy acomodando pero me sale este problema que cuando uno entra a las entras se desaparese y lo que quiero es que no lo aga espero que me puedas ayudar auq no lo aga http://pruebaaajpt2.blogspot.com
    de antemano muchas gracias espero respuesta

    ResponderEliminar
  10. Hola Hertey, he visto tu blog, y tienes toda la razon, ya que el codigo que implemente esta bien, pero el error del por que no sale el slideshow cuando pones en tus entradas es porque, esta implementado para que aparesca en la pagina principal. Esto es por que se lo coloco en el codigo HTML de tu blog y no en un widget, en este codigo div id='main-wrapper', ahora la solucion es muy simple, solo basta con poner el codigo que se encuentra en el paso 5 en un widget. y borrar el paso 5 cuando ingresabas a tu codigo HTML. Espero haber sido lo mas explicativo posible.
    Cualquier pregunta no dudes en hacermelo saber.
    Saludos...

    ResponderEliminar
  11. Luis, estoy haciendo este tutorial y me sale el carrusel en su sitio, pero no me aparece nada, está en blanco... tengo que poner yo las imágenes (en mi caso son fotos), o si he entendido bien, las coge él según las tenga etiquetadas?
    Gracias por tu ayuda.

    ResponderEliminar
  12. Hola, tal vez algo estas haciendo mal, sigue este paso. En el código que dice label1 = "Widgets"; cambie el nombre que se encuentra de color azul por el nombre de la etiqueta que quiera mostrar. Por ejemplo, yo elegí Widgets porque quiero mostrar las etiquetas que se encuentran bajo esa categoría.
    Recuerda que solo debes poner el nombre de cualquier etiqueta y no necesitas insertar ninguna imagen.
    Cualquier pregunta no dudes en hacernmelo saber.
    Saludos...

    ResponderEliminar
    Respuestas
    1. amigo y como puedo hacer para que muestre las ultimas entradas que publique sin etiquetas

      Eliminar
  13. Hola Luis, mi blog esta dedicado a la fotografía, una de las etiquetas que tengo es la de plazas,según tu explicación entiendo que tengo que poner el nombre de una de las etiquetas, lo hago así;

    numposts1 = 15;
    label1 = "plazas";
    le doy a guardar y el carrusel no coge las fotos que están etiquetadas como plazas. Que hago mal???, le voy cambiando el nombre de etiquetas pero no sale con ninguna.

    ResponderEliminar
  14. Hola Aquario, he visto tu blog de pruebas, y veo que no te sale ninguna foto, eso es normal por que solo tienes dos publicaciones en tu etiqueta plazas, y tienes que tener como minimo 8 post en tu etiqueta plazas, para que el slideshow carrusel pueda funcionar. Em mi blog de demos funciona correctamente. Cualquier pregunta no dudes en hacermelo saber.
    Saludos.

    ResponderEliminar
  15. Luis, de nuevo estoy aquí... no me gusta ser muy pesada, pero he hecho lo que me dices. Tengo 10 etiquetas con el mismo nombre, he cambiado a 8 el numposts1 ... y sigue sin salir nada. Me da pena tener que dejar de ponerlo, pero se ve que en algo fallo porque no me sale.
    Gracias por tu paciencia. :)

    ResponderEliminar
  16. Hola Aquario, en vista que no has podido realizar este truco de blogger, te voy a dejar aqui la direccion de mi email para poder hablar directamente con tigo en el chat, con eso te guiare rapidamente para que llegues a tener este truco para blggger: ayudadeblogger@gmail.com
    Enviame un email, estare esperando.
    Saludos...

    ResponderEliminar
  17. hola amigo ya segui tus primeros dos pasos pero me atore en lo de encontrar este codigo
    div id='main-wrapper' tengo estendida la plantilla y no doy con este codio me podrias decir cual fue o es mi error te lo agradeceria muhco te dejo mi correo para estar en contacto Bejeweled2011@hotmail.com

    ResponderEliminar
  18. Hola Bejeweled2011, ya te envie un mensaje a tu correo electronico para ayudarte en la configuracion.
    Saludos.

    ResponderEliminar
  19. una pregunta como aria que enves de que apareciera arriba , apareciera abajo osea que el carrusel estuviera abajo del blog ?? o abajo de cada entrada porfavor respodan

    ResponderEliminar
  20. Hola Carlos, el truco es muy facil, se me es un poco dificil explicarte por este mensaje, si quieres que te ayude, deberas estar conectado en el chat de gamil, esta es mi direccion: ayudadeblogger@gmail.com
    Con mucho gusto te ayudare saludos.

    ResponderEliminar
    Respuestas
    1. Noooo!!!! respondele a Carlos Casto aqui, ya que a mi también me gustaría saber.... Gracias!!!

      Eliminar
  21. hola amigo gracias por esto y pues i lo pude poner solo una pregunta como puedo cambiar el tamaño de las imagenes y si es psoible cambiarle el fondo blanco por uno cris o negro y como puedo hacer todo eso de antemano te lo agradesco

    ResponderEliminar
  22. Hola gracias por el post, mi problema es que quiero hacer el slide más estrecho y en vista previa lo consigo pero al publicar me sigue saliendo igual de ancho. ¿Cómo podría modificarlo?
    Gracias!!

    ResponderEliminar
  23. Hola Xelaoy, con respecto a tu pregunta tienes que cambiar en este lugar: width:950px;height:185px
    Y luego le das un clik en guardar en el codigo html de la plantilla, eso es todo.
    Saludos.

    ResponderEliminar
  24. Muchas gracias!! Solucionado!! Vamos con otra pregunta. Cómo puedo limitar el número de caracteres que entran en el título de las fotos? Es decir sé que puedo limitarlo poniendo el titular de las entradas de post con tantos caracteres, pero hay alguna manera de poner por ejemplo parte del titular y puntos suspensivos cuando no entre entero?

    Gracias nuevamente por tus aportaciones Luis, me han ayudado mucho ;)

    ResponderEliminar
  25. Hola, con respecta a tu pregunta, solo tienes que cambiar esto summaryPost = 140;
    summaryTitle = 25;
    Donde dice 25 sirve para mostrar los caracteres del titulo de tu post, pon el numero que tu quieras mostrar y donde dice 140 es el resumen de tu post, podras cambiarlo por el valor que tu quieras.
    Espero haber sido de mucha ayuda.
    Saludos.

    ResponderEliminar
  26. Fenomenal de nuevo Luis!! Gracias otra vez. Como soy un culo inquieto sigo preguntando jajaja. Al abrir una imagen en la página principal me aparecen sobre ella los botones del carrusel, hay alguna manera de que no salgan?
    Me explico mejor:
    Cuando abro un post no hay problema, como el carrusel solo aparece en la pagina principal, veo las imagenes ampliadas sin ningun tipo de problema, pero cuando en la página principal le doy directamente sobre una imagen para ampliarla, me aparecen los dos botones del carrusel. Hay alguna manera de que al abrir la imagen no se muestren??

    Gracias otra vez por tu ayuda y por tu tiempo ;)

    ResponderEliminar
  27. Hola, estube en tu blog, y no veo nada parecido a lo que tu dices, el carrusel esta bien y las imagenes no se sobre ponen con los botones del carrusel.
    Saludos.

    ResponderEliminar
  28. Hola de nuevo Luis!! Gracias nuevamente, pero creo que no me expliqué bien, el caso es que si tu haces click en alguna foto de la pagina principal, sin meterte en la entrada en sí, al ampliar la imagen aparecen sobre ella los dos botones de desplazamiento del carrusel. Esa era la cuestión, cómo hacer para que no se vean sobre la imagen ;)
    Un saludo y muchas gracias nuevamente Luis!!

    ResponderEliminar
  29. hola!!

    tengo un problema
    el carrusel no se desplaza..

    mi blog es http://toacien.blogspot.com

    Gracias!

    ResponderEliminar
  30. Hola Manuel, he visto tu blog pero no veo por ningun lado el slideshow carrusel.
    Saludos.

    ResponderEliminar
  31. si lo quite pero ya me funciona bien¡ Gracias¡

    ResponderEliminar
  32. Hola Manuel, he visto tu blog y te quedo estupendo el slideshow carrusel, has realizado un buen trabajo, saludos.

    ResponderEliminar
  33. hola amigo tengo mucho tiempo buscando este slideshow y porfin lo encontre aki, pero en mi plantilla no me sale el codigo :
    del paso 5
    y ya le puse en expandir artilugios y nada solo lo antrerior esta todo correcto ayudame xfavor

    ResponderEliminar
  34. Hola Natsu, primero necesito que me envies la direccion de tu blog de blogger, para poder ver el error, y para ayudarte directamente agregame al chat de Gmail, esta es mi direccion de correo: ayudadeblogger@gmail.com
    Con mucho gusto te guiare para que puedas conseguir tu objetivo.
    Saludos.

    ResponderEliminar
  35. hola esta es la direccion de mi blog:http://kiubysennin.blogspot.com
    ya puse los codigos anteriores pero el del paso 5 no lo puedo encontrar

    ResponderEliminar
  36. Hola he visto tu blog, tiene demasiada carga la cual no es recomendado para buscadoresm y has realizado una serie de cambios en tu codigo html, primero has una copia de seguridad de tu blog por si algo haces mal, luego busca este codigo expandiendo plantilla de artilugios img alt="¡¡ANIME AL EXTREMO!!" id="Header1_headerimg" src="http://1.bp.blogspot.com/-wsTcnos5bUw/UQ1yL3Peb8I/AAAAAAAABFs/A3ZCrf_W8ZY/s1600/11%2B%25282%2529.png" style="display: block" height="500px; " width="1500px; "
    y vas a ver que tiene algunos terminaciones como estas /div> cuando finalice el div inserta el codigo del Paso 5 , eso es todo.
    Saludos.

    ResponderEliminar
  37. Hola Luis, ¿cómo estás? Gracias por este magnífico tutorial. Pude implementarlo en mi blog pero lo borré de inmediato porque quisiera consultarte algo, me gustaría que el carrusel saliera exclusivamente en las entradas y en ningún otro lugar y que los pots del carrusel variaran según la etiqueta dentro de cada post. ¿Sería esto posible? Gracias anticipadas, mi blog es Amandysha.net

    ResponderEliminar
  38. Hola, con respecto a tu pregunta, si es posible colocar el slidecarrusel sobre las entradas, y sobre la otra pregunta no es posible que varie las imagenes por cada entrada que se muestre con las diferentes categorias basado en etiquetas.
    Saludos.

    ResponderEliminar
  39. Hola luis ,, ¿ como hago para colocar el carrusel debajo de la barra de menu ? .por sierto ...div id='main-wrapper' .. <<<<< este codigo no lo encuentro ,, te dejo mi blog , para que lo chekees ,, y si es mucho pedir , te ago adm. para que me ayudes sip , gracias .... saludos


    http://blogdepruebaparanose.blogspot.com/


    ResponderEliminar
  40. Hola, es un truco muy facil, agregame al chat de gmail, esta es mi direccion: ayudadeblogger@gmail.com
    Identifica tu problema y gustosamente te ayudare.
    Saludos.

    ResponderEliminar
  41. hola luis amigo tengo mucho buscando este carrucel pero nunca puedo ponerlo en mi blogg no encuentro el codigo main-wrapper del paso 5
    tengo una plantilla hecha con artister4 nose si se pueda poner ese carrucel ayudame
    este es mi blogg http://animexmonton.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola, he visto tu blog, primero, tu blog tiene demasiado peso de carga, y se demora en cargar, ademas tienes habilitado varios script el cual no deja que funcione bien, necesitare estar dentro de tu blog para poder habilitar el slideshow y borrar algunos scripts que no sirven y vajar la carga de tu blog, si quieres que lo haga avisame.
      Saludos.

      Eliminar
    2. si porfavor ayudame te hago admin del blogg ayudame porfas que ya tengo mucho tratando de hacer esto y no puedo (y)

      Eliminar
    3. Hola, primero vamos por partes, agregame al chat de gmail esta es mi direccion: ayudadeblogger@gmail.com
      Una vez que me hayas agregado hablare con tigo directamente para explicarte los pasos a seguir,
      Saludos.

      Eliminar
  42. hola amigo ya te agregue a mi chat de google te mande un mensaje ojala lo peudas recibir

    ResponderEliminar
    Respuestas
    1. Hola claro que si, espero estes conectado para poder ayudarte

      Saludos.

      Eliminar
  43. Hola, he intentado esto, pero no me sale ni el skin, ni el head, como dice en tu post~ mi plantilla es descargada y estoy segura que antes aparecían esos códigos... Solo que ahora con el cambio de blogguer no los encuentro, agradecería mucho tu ayuda!
    te dejo mi correo; meducitamar@gmail.com

    ResponderEliminar
    Respuestas
    1. Hola, he actualizado este post y lo he puesto con el nuevo editor HTML de blogger, el cual se actualizo hace 4 dias atras, es por eso que no podias enontrar el ]]> y los otros codigos, ahora si puedes realizar este truco para blogger, ademas voy a actualizar todos mis post para que puedan configurar su plantilla en el nuevo editor HTML de blogger. Cuentame si pudiste hacerlo,
      Espero tu respuesta
      Saludos.

      Eliminar
  44. Lo hice tal cual pero no me funciona mi blog es http://www.pelipolis.com.ar/ Gracias!

    ResponderEliminar
    Respuestas
    1. Hola, no se muestra bien el slidershow en tu blog por que tienes 3 jquery activados en tu plantilla, es siempre recomendado tener solo un jquey, por que si tienes mas de uno, produce conflictos y no se muestra bien el slider,
      A continuacion te dejo los tres script Jquery que encontre en tu blog, te recomiendo que borres dos y que solo te quedes con uno.

      http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

      http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js

      http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js

      borra los dos primeros jquery y solo quedate con el tercero..
      Saludos.

      Eliminar
  45. Lo logre poner pero queda mal... no se ven las flechitas para pasar, ni nada ! en http://www.pelipolis.com.ar/

    ResponderEliminar
  46. logre instalarlo y le hice algunos arreglos, lo unico que no anda es lo de las etiqetas, en mi caso seria estreno, lo puse pero muestra todas las pelis no solo los estrenos. Me podrias ayudar?? gracias

    ResponderEliminar
    Respuestas
    1. Hola, con respecto a tu pregunta es por que cuando tu publicastes una entrada de peliculas y le pusiste como etiqueta estrenos y peliculas ahi es donde cometiste el error ya que tambien mostrara la entrada de peliculas, deberias reorganizar bien las entradas, en los post de peliculas solo debe tener tu etiqueta peliculas y no la etiqueta estrenos, espero haber sido lo mas explicativo posible.
      Saludos.

      Eliminar
  47. uhh!! ok, gracias x tu respuesta. saludosss

    ResponderEliminar
  48. Hola!
    No encuentro el código div id='main-wrapper', y eso que he ido expandiendo uno a uno todas las secciones de artilugios.

    El blog es http://atardeceresbajounarbol.blogspot.com.es
    Mi correo es zeleza.abua@gmail.com

    Muchas gracias!

    ResponderEliminar
    Respuestas
    1. Hola, si no lo encuentras en el eidtor HTML de tu plantilla, ubica este codigo:



      E inserta todo el codigo del paso 6, antes del codigo que te indique, eso es todo,
      Saludos.


      Eliminar
    2. ¡Hola!
      ¡Joder, ha quedado genial! ¡Infinitas gracias por tu trabajo!

      Un saludo.

      Eliminar
  49. Brother, realize Todos los pasos a Cabalidad y no me funciono, lo repeti 3 veces y no funciono. Al cuarto Intento solo llegue al paso 5 y guarde los cambios, y el paso 6, el Codigo que habia que pegar despues de < div id='main-wrapper' > , lo agrege a un Gadget HTML en el diseñador de plantillas,Pero igual no hay ningun cambio, tedeje un comentario en tu pagina de Facebook. Tedejo el link de mi Blog, ayudame porfa con esto, es un proyecto que tenemos con un par de colegas
    http://internationalmultimedia.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola he visto tu blog y veo que tienes algunos scripts, los cuales son los cuasantes de que no se muestre el slider carrusel, especialmente el de Twitter que tienes ubicado en la parte inferior de tu blog.. Ademas tampoco funciona tu slidershow principal, tiene solucion, tendria que yo ingresar a tu blog y arreglarlo directamente, si quieres que yo lo haga, enviame un mensaje directamente; ayudadeblogger@gmail.com
      Y gustosamente te ayudare.. Espero tu respuesta directamente en mi cuenta
      Saludos.

      Eliminar
  50. ok, pero esto no Afectara los demás elementos de la pagina ? Como la barra de Tweets que esta en la parte inferior ? o cualquier otro elemento ?

    ResponderEliminar
  51. Lo probe y me quedo Mortal, Muchas Gracias

    ResponderEliminar
  52. Luis, copie los scrips del carrousel, todo bien con las entradas, muestra los títulos, pero no muestra las imagenes. Cómo podría solucionarlo??

    ResponderEliminar
    Respuestas
    1. Hola, enviame la direccion de tu blog para poder verla y decirte donde esta el error.
      Saludos.

      Eliminar
    2. la dirección de mi blog es http://futboldelparaguay.blogspot.com/
      Agradezco tu atención y tu ayuda.

      Eliminar
    3. Hola he visto tu blog, y esta todo bien, parece que tienes que revizar en la configuracion de tu blog, en la parte que dice Configuracion, luego le da un clic en Otros y verifica donde dice Permitir feed de blog, vele si esta activado el icono que dice Completo, si no esta en Completo, habilitalo en esa posicion.
      Espero tu respuesta
      Saludos.

      Eliminar
  53. hola amigo ya hice los primeros dos pasos pero me atore en lo de encontrar este codigo
    div id='main-wrapper' tengo estendida la plantilla y no doy con este codio me podrias decir cual fue o es mi error te lo agradeceria te dejo mi correo para estar en contacto miguel_angel0824@hotmail.com
    Este es mi blog
    http://jpanimexmf.blogspot.mx/

    ResponderEliminar
    Respuestas
    1. HOla he visto tu blog, tendria que estar yo adentro de tu plantilla para poder ubicarlo correctamente el Slidecarrusel, ya que tu plantilla tiene otra estructura..
      Saludos.

      Eliminar
    2. Entonces me podrías dar tu correo para ponerte como administrador y vieras la estructura y me dijeras que puedo hacer agradezco tu ayuda

      Eliminar
    3. Esta es la direccion de mi email: ayudadeblogger@gmail.com
      Saludos.

      Eliminar
  54. Hola, Como hago para que solamente aparezca en inicio y no en todas las paginas. GRACIAS

    ResponderEliminar
  55. Hola para realizar ese truco, sigue las instrucciones del siguiente enlace. http://www.ayudadeblogger.com/2013/08/como-ocultar-un-widget-en-blogger.html
    Saludos.

    ResponderEliminar
  56. Hola Luis.. Sos uno de los pocos que contesta en los comentarios de las paginas que ayudan a los blogger... Por eso te queria preguntar como puedo realizar algo que vi en otro blog.

    Es como un carrusel con barra desplazadora van apareciendo mas imagenes a medida que se desplaza, se ve aqui http://www.tutelenovela.tv/ donde dice "Series mas vistas" "telenovelas mas vistas"

    ResponderEliminar
  57. Sino, se puede me gustaria que coloques este carrusel de la entrada en mi blog pelipolis.com.ar ya te agregue como administrador, pero me gustaria que si se puede agregar como elemento HTML javascript, y si se puede agregar varios de estos. Sino como lo hiciste vos. Saludos!

    ResponderEliminar
    Respuestas
    1. Hola, he visto la pagina web que me enviaste, esa pagina utiliza otro tipo de estructura de slidehow carrusel. Tal vez te gustaria realizar este truco en el cual solo utlizas un simple codigo para realizar un slideshow carrusel, aqui te dejo el enlace, http://www.ayudadeblogger.com/2013/10/tutorial-como-insertar-un-slider-carrusel-en-blogger.html
      Si no te gusta ese tipo de slideshow y te gustaria que yo realice este truco de slideshow carrusel en tu blog de blogger hazmelo saber para asi aceptar la invitacion de tu blog que me has enviado y poder ingresar yo mismo en tu blog y darte realizando este truco, espero tu respuesta para saber en lo que has pensado.
      Saludos.

      Eliminar
    2. Lo que sucede es que yo quiero que sea automático con etiquetas como este! Pero no logro ponerlo, si podes haceme el favor y colocalo vos en mi blog.. Ya te envié la solicitud. Gracias!

      Eliminar
    3. Hola, ya acepte la invitacion de tu blog, ahora necesito que me agreques como autor de tu blog, solo asi podre ingresar al Editor HTML de tu blog e insertar todo el codigo correspondiente en tu blog.. Y que me digas cual es la etiqueta que quieres mostrar en tu slideshow carrusel, dime donde quieres que lo inserte, debajo de la cabecera principal de tu blog, arriba del slideshow de tu blog o a bajo del slideshow de tu blog. Espero tu respuesta inmediatamente....
      Saludos

      Eliminar
    4. Listo.. ya esta hecho!. Gracias de nuevo!

      Eliminar
    5. La etiqueta es "recientes" sin las comillas!... Hay alguna forma de agregar varios slider con diferentes etiquetas?

      Eliminar
    6. Hola, he estado en el editor HTML de tu plantilla, tienes estilos diferentes los cuales no dejan que se muestre todo el slideshow carrusel, lo inserte y funciono perfectamente pero en un tamaño diferentes. Asi que lo retire. Recuerda eliminarme como administrador de tu blog.
      Saludos

      Eliminar
  58. Hola.. lo logre poner perfectamente, pero quería saber como poner dos etiquetas diferentes, fijate en mi blog pelipolis.com.ar puse dos containers con dos etiquetas diferentes pero al apretar la fecha de uno se mueven los dos containers a la vez.

    ResponderEliminar
    Respuestas
    1. Hola, he visto lo que has realizado, el slider no te funciona perfectamente porque estas creando doble slideshow carrusel, deberas eliminar uno.... ya que no sirve para dos en tu blog.
      Saludos.

      Eliminar
  59. Me podes ayudar a modificar, todo para que funcionen los dos? Quise cambiar el archivo .js pero no se bien que modificar, tambien ponerle otra atribucion a los botones y todo del segundo slider, ejemplo next_buttom ponerle next_buttom2 y asi con todo. Es decir cambiar todos los codigos para que funcione tanto los css como los que van arriba de /head y el otro, yo no se bien que cambiar... Gracias

    ResponderEliminar
    Respuestas
    1. Para cambiar de estilos al archivo del blog, sigue las instrucciones del siguiente enlace: http://www.ayudadeblogger.com/2012/10/cambiar-de-estilos-al-archivo-del-blog-widget-para-blogger.html
      Saludos

      Eliminar
  60. Hola Luis, disculpa que te moleste pero al igual que el chico del primer comentario, No encuentro en mi plantilla el comando div id='main-wrapper'

    Abrí todos mis artilugios, tengo activadas las etiquetas, pero no sale ese id... no sé porque, podrías ayudarme...???

    ResponderEliminar
  61. Buenos días, gracias por compartir estos conocimientos
    El slider me funciona perfectamente pero quería saber si es posible modificar el tamaño de las fotos, he estado revisando código y no he sabido encontrarlo.
    Mi Blog es www.trekkingsennepal.com. Gracias y saludos

    ResponderEliminar
  62. gracias amigo necesitaba algo como eso para mi blog lo estoy probando en el rediseño que quiero hacerle al blog principal mi blog de pruebas es este http://ejemplospro.blogspot.com y mi blog principal es este
    http://ifullinfo.blogspot.com cuando tengas tiempo pásate por allí y dime en que puedo mejorar nuevamente muchas gracias estaba tratando de colocar uno hace tiempo y me hacia un 8 con esto de jquery y javascript, saludos amigo...!!

    ResponderEliminar
  63. excelente aporte amigo, implemente este y estaba excelente pero conseguí otro luego y le personalice el css, puedes verlo en mi blog http://ifullinfo.blogspot.com de verdad gracias fuiste el primer tutorial que vi y por lo tanto el primer ejemplo de Slideshow Carrusel que tuve saludos...!!

    ResponderEliminar
  64. hola, gracias por el aporte, pero en mi plantilla no aparece ]]> , www.figaalvarado.com
    es la pagina blog...

    ResponderEliminar
  65. me gustaria instalar esto pero en un foro (vbulletin) no en un blog, donde tendria q poner los codigos??

    En en muchos lugares enseñan para los blogs pero para los foros nunca y he visto en foros. Podrias ayudarme??

    ResponderEliminar
  66. ¿por qqué no salen las entradas de mi blo? solamente me sale el cuadrado pero en blanco

    ResponderEliminar
  67. Hola amigo, me puedes ayudar no me sale el código div id='main-wrapper' para poner el carrusel en mi blogg de prueba (http://blogdepruebasanimelyo.blogspot.mx/ ) te agrade seria tu ayuda.

    ResponderEliminar
  68. buenísimo oye me encanto, tienes una entrada que habla de un carrusel con entradas populares, me gustaria el de entradas populares con esta con este css porque quiero dos.
    Espero y me puedas ayudar saludos !

    ResponderEliminar
  69. Hola! antes lo tenía en mi otra plantilla, pero la he cambiado y lo he intentado poner en la nueva y no m aparece...me puedes ayudar, por favor?? mi blog es www.pequesymamis.blogspot.com
    gracias!!

    ResponderEliminar
  70. AMIGO NO PUEDO ENCONTRAR EL CODIGO ]]>
    AYUDAAAAAAAAAAAAAAA

    ResponderEliminar
  71. Hola estimado...gracias por su paciencia y respuestas a todos. Mi caso es el mismo: sólo aparece la barra del carrusel en blanco y nada más . Hice todo lo que le dijo a otras personas borrar paso 5, poner el nombre de la etiqueta y nada. auxilio!

    ResponderEliminar
    Respuestas
    1. Enviame la direccion de tu blog. Y asi te podre decir donde puede estar el error. Saludos.

      Eliminar
  72. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  73. Yo tengo una plantilla gratis de SORA TEMPLATES http://dsdoramas.blogspot.com/, pero esta no me deja hacer nada, se desconfigura por cualquier cosa que le agregue, puse los tabs para los videos y ahora el slideshow que tenia por defecto no se mueve. Por lo antes dicho estoy tratando de hacer mi plantilla parecida desde 0, he hecho todos los pasos que indicas, pero el slideshow se muestra vacío en mi blog. Tal como la persona del primer comentario no me aparecia el main-wrapper, expandi toda la plantilla como comentaste pero no aparece, segui las indicaciones de una persona que comento y se lo puse manual y el slideshow aparece, pero como le indique vacio. Si pudiera ayudarme se lo agradecería, o si hay alguna manera de arreglar mi slideshow en mi blog que se vuelva a mover para ver toda los post recientes.

    ResponderEliminar
    Respuestas
    1. Aparece vacio por que esta creando conflictos con un script de la plantilla Sora Templates, ese es el motivo que no lo esta dejando mostrar al slideshow carrusel, tienes que ver que no contenga un script de slideshow en la plantilla que instalastes, al tener dos script de slideshow no deja mostrar el slideshow carrusel. Saludos.

      Eliminar
  74. Hola esta muy bueno me quedo bien a mi . La pregunta es : yo lo tengo debajo de la cabezera de mi blog y si quiero agregar este mismo pero con otra etiqueta debajo de el que agregue . gracias espero respuesta .

    ResponderEliminar
    Respuestas
    1. Hola sobre tu pegunta "yo lo tengo debajo de la cabezera de mi blog y si quiero agregar este mismo pero con otra etiqueta debajo de el que agregue" No es posible agregar dos veces el mismo slideshow carrusel por que crearia conflictos. Y dejaria de funcionar, te recomiendo que solo dejes un slideshow carrusel. Saludos.

      Eliminar
  75. me podrias ayudar con hacer uno pero para una pagina jimdo? saludos

    ResponderEliminar
  76. amigo si me pudieras ayudar para poner esta y otra de entradas populares a la vez, si se puede?
    gracias

    ResponderEliminar
  77. Hola quisiera poner los iconos de compartir como aparece en esta pagina al final en el footer
    https://universomlm.com

    mi pagina es www.4lifeft.com

    gracias por adelantado

    ResponderEliminar
    Respuestas
    1. Hola Leonardo, sobre su pregunta lo tendré en mente para poder ayudarte con este truco y realizar un post sobre como insertar este tipo de iconos sociales. Saludos.

      Eliminar
  78. mira que me sale el slide pero no me salen las imagenes de las entradas
    que puedo hacer??
    mi blog: http://khanimega.blogspot.com/

    ResponderEliminar
    Respuestas
    1. Hola Osiris, vi tu blog, sigue las siguientes instrucciones:

      Primero:

      1.- Ir a Blogger
      2.- Un clic en Configuraciones
      3.- Un clic en Otros
      4.- Ahora se te mostrara una nueva ventana en la cual podrás ver lo siguiente:
      Feed del sitio

      Abajo de lo que dice "Feed del sitio" encontraras otras palabras que dicen "Permitir feed del blog" a lado derecho encontraras un icono en el cual tienes que activar la palabra que dice "Completo", luego le das un clic en "Guardar configuración" el cual se encuentra en la parte superior derecha de tu blog.

      Ahora ya debe funcionar, mira tu blog.

      Si aun así no te funciona, no dudes en escribirme,

      Saludos.

      Eliminar
    2. En verdad MUCHAS GRACIAS.
      Ha sido de mucha ayuda.
      Saludos y mucha suerte

      Eliminar
    3. Este comentario ha sido eliminado por el autor.

      Eliminar
  79. Hola Luis! He conseguido insertar el slider original en mi blog y funcionaba muy bien. Luego he querido hacer algunas modificaciones de apariencia (agrandarlo y dejarlo sólo con tres entradas) pero me hace un extraño al cargar. Aparece desplazado a la derecha y luego él solo se posiciona bien centrado. No sé qué parámetro debo modificar ¿podrías ayudarme? Gracias por lo que he conseguido hasta ahora. Mi blog es www.porfinencasa.com

    ResponderEliminar
    Respuestas
    1. Hola Mónica, el problema es que realizaste varios cambios en el código, esto sucede solo cuando esta cargando, pero cuando ya termina de cargarse la pagina completa se vuelve a centrar. Saludos.

      Eliminar
    2. Sí, he hecho bastantes cambios y todavía quedan los de color. Pero ¿no hay posibilidad de que cargue ya centrado? En mi otro blog usé una plantilla que ya lo traia incorporado y no hace ese movimiento extraño durante la carga. Si quieres verlo es www.rustico-chic.blogspot.com

      Eliminar
    3. Hola Mónica, he ingresado a su blog y no veo el Slideshow basado en etiquetas. Saludos.

      Eliminar
    4. Hola Luis! Está justo debajo del menú y es el widget HTML185 y es class="coverflow"

      Eliminar
  80. otra vez yo XD
    como podría hacer para ponerle un titulo visible a slide
    gracias

    ResponderEliminar
    Respuestas
    1. Hola Osiris, a que te refieres "Ponerle un titulo visible al slider", en donde quieres que se muestre el titulo.

      Saludos.

      Eliminar
    2. hola
      me gustaría que saliera, en mi caso nuevo en khanimega,
      en la parte superior del slider

      Eliminar
  81. Saludos, me gustaría saber como centrar el slider, mi blog es este http://igalima-ichaival-reviews.blogspot.com.es/

    ResponderEliminar
    Respuestas
    1. Hola, ubique todo el código del paso 6 en un widget de su blog, Diríjase a Diseño, un clic en Añadir un gadget, busque el widget HTML/Javascript, abralo he ingrese todo el código del paso 6, luego de un clic en Guardar y ubique su widget debajo de la cabecera principal. Saludos.

      Eliminar
  82. Hola Luis, felicitaciones y gracias por tu colaboración, podrias por favor, decirme como lo desplazo hacia la parte superior derecha del blog?.
    Gracias nuevamente

    ResponderEliminar
    Respuestas
    1. Hola, por favor cual es la dirección URL de su blog de Blogger y así poder ver como puede realizar lo que usted esta solicitando?

      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