Slideshow Carrusel basado en etiquetas para blogger

Como hacer un Slideshow Carrusel basado en etiquetas para blogger

http://www.ayudadeblogger.com/2012/11/como-hacer-un-slideshow-carrusel-basado-en-etiquetas-para-blogger.html

NOTA: Lo he probado pero solo me sale el contenedor, no sé si es por algún problema de incompatibilidades o por los feeds, cuando tenga tiempo lo miro)

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 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.

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

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

/* Slideshow carrusel create by www.ayudadeblogger.com ---www.grupodelecluse.com-------------------------------------------- */ #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/AVvXsEgHhRsrD-S-Oms-cn1OF__Q56uLxpsJkX8e1uDkQ5K-MyS2SoFFpttnZh54s-guwZivgVraK7FpaBYwUHOHKaUY9s6NZAZacE0RhV6uakrqFy7ajDC0qpDO0kMMuwAB38ge1rs4JtBVFaw/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWUznrITw_VOk4nhTi7bXCG_PsDdwncwU_mJmBdkvwcuMWwbgV1fuVSbRwzAVfqgfHpfFfVp-cJpC5jjtF3eNZrY7pKDL74B_-0YvamqPlsD_eF2Azj-NxIOPSsxRL45NCRS1lXbLggj0/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/AVvXsEhd87VUH_QtTfeRZpGVWtYqBkqlsMeMj4yNCuthhFaXclLzKJBXQnAvIiQpfE_1YUsQYreQlh9UL6ZQ2soiWSDjZJoJ0tGKN_r7SJNEl8a5-D_1uKABqZ7HS5stK8I5EWKkgu2o7NJscKg/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTilYlJwwLQJs70RqnoTt6aU_lbkFKXtSu6hbiSfSxqh5m6HbLbYVHWRdZP9BNQxZtDcrmQMDj5LJy45SQj2GWNdz8Kv079LjUaqkMFDVML-34OFA1AXlPkL8KCZpcHiLl7ehX-Eefuj0/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/AVvXsEhHPp_1NTxwOzYO2ck8NCtYiMH_mHUhHF56U53oX9aYWTlEYmDIsIxpthhLbZEltDPVs9V86ZgDevQ64Prt53MRBYH7gO4YGfMmFW-j19f4axvSe-krLgmApUhtArxp2ZuATsjCiLflRM8/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/AVvXsEhWW8oGELjBUj3mKVZAdjej6Gs0NHHvnGZg2fBUCP6Z2fboK6VvT2v8rZvXgkxi64Cw1VVRsYIYtTn1XuDaNWvgZ4GXggiPUOR9ZDxeQLNo-0FvfB94mjTl7ZNUPfUzbiLfhuc23cTLttc/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/AVvXsEielfZJpoZuVIrO7ZutSoDTsOuN1UorDC8W4pjXHsWzV56gf_KunmXkmbXWu_Q0wqMM_7fte5givzv6gC-GHw0hrhHwJJACUT7yTUt4wTn5YchOaxkK2ZgKVQdrEo8ZNhJe9EdAg5BZflQ/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.

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

(si no existe ese código en tu plantilla, podrás buscar este otro código type='Header'/>  y inserta las siguientes líneas de código al final de  </div> </div>. (Esto se coloca en el lugar que se quiere que aparezca, cabecera, )

<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.