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.

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 automático
Slideshow Manual

A continuación puede ver su demostración en el siguiente blog de demos

Demo Clic aquí

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 más explicativo posible para que ustedes no tengan ningún inconveniente al momento de seguir las instrucciones.

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.

3 Busca este código

]]></b:skin>

4 Inserte el siguiente código justo antes de ]]></b:skin>

#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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg61MZd_vYmn1KaNRqSS31qIgJAnaCndIYaoHOJHLd0mqSpjHzr_WWX9y7YbIIYf1MXDhT5WZAYPLHfB0xi_HaYJWEKF5lL6d0tUSDS1N0Dlzf4xk9IewTJbxkpj5CtMHixCl9XfYsBisY/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjSkO97H-LPd30i-OK13De0C2k5zpA39zEyulOuhflqWLMdmKMOY96rlnRjuylTZqeuno2K0oRkK7zbev8rS8Fs_IxxfRrUJZZeJf8gxM0Sc0_2tXOpj921dsjQsh6EsLte6X0SnWCX9Vs/s1600/prev.png) center;z-index:100;cursor:pointer;border-right:1px solid #ccc}
#carousel #previous_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhojL2Fi6eI5dS7ohoWngTi-ZTdwobTzKnkoh7jkjnuNUgzVLkY6idzuFIu9OBiQbdfdLpr9qPjA8HOpAlsP-Mf3Q-ZsyiGMh7HndffOdi78YP3VKjGVlFQy9KFDe7Pc2fziQP7u-UrXNA/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQEK_AmUg6hJT1nTevxIlgdhEkTgXbkgGObAISlTmhZ_UhKxwzDX0BVlXh8G8pedJepgSmv-Ow1ivTFro0N4T7w8TcXwX14Gjm-eDvZJrSF431nhUF4TbJO2xXkXeqIGPfiWEq4pZdmso/s1600/next.png) center;z-index:100;cursor:pointer;border-left:1px solid #ccc}
#carousel #next_button:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5QNWBZAKaXqkvV0Ac9CeUsic_zcYgSA7HPOsrdb1vhEBYykXB2c5kc_b1_OsNtrzMKi09wXVlRCvI-R7dHIr2JFj_DqxVWwxV4OpbbUa2AduHBiby0jtbpD5fRQNeAQzKASLhdMnRXF4/s1600/next.png) center}
#carousel ul{width:100000px;position:relative;margin-top:10px}
#carousel ul li{background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioOyeQNUug96Lzl2ijF5mOfTvUvea2gqKFm0kBGOXzIVg86isvyZQJv0QnM5wB-jblFvKEq5Drdohuy-36NmqVdYpcVtyqcmIQJrh_kIFx8BOF1RYKsnMFUBzujcknolvtQrzk-Z5sulc/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOAzh7i4k4VMcpDZikLZRR3y-qF0ZqQxCU43UA8bMgOEyQbHL32LjBjOhrnt37Jhyphenhyphen52Diio96TB2On-qFWa1oZeIoQWWrNvYG5fFXuovwjE_w5_8M16A4yoXSYN_TfNnGD-66A5Nyzmos/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 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 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.

Que es una Etiqueta, más informacion en este enlace

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 Un clic en “Guardar Tema” 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é

Recuerda suscribirte:

Obtenga nuestro boletín de noticias diario | Suscríbete gratuitamente SUSCRIBIRSE

¿Te ha resultado útil este artículo, recomiendanos?

Si

TAGS: Slider Carrusel

Share: