Carrusel Automático Ultimas Entradas .V 2

Este es otro tipo de slider creado por Maskolis y adaptado ha mostrar las últimas entradas por etiquetas. Como en el anterior SLIDER  también he modificado un poco este, no mucho en realidad, sólo he cambiado el tamaño y colocado la fecha en español, aparte para que muestre  las últimas entradas en lugar de por etiquetas.

VER DEMOSTRACIÓN.

Colocación:
Acceder a Blogger con tu cuenta
Después de que seleccione el blog que quiere agregar este control deslizante.
Vaya a >> Editar plantilla HTML, a continuación, comprobar expandir plantillas de artilugios
Como medida de precaución para evitar futuros errores de edición, primera copia de seguridad de tu plantilla.
Después de todos los pasos anteriores, pon el siguiente código encima de  ]]> </ b: skin>:

CSS:

#carousel{width:900px;height:125px;border-bottom:1px solid #ccc;position:relative;display:block;background:#424242;margin-bottom:8px} #carousel h5{color:#555;margin:2px} #carousel .container{position:absolute;left:24px;width:880px;height:125px;overflow:hidden} #carousel .thumb{float:left;margin-right:5px;} #carousel #previous_button{position:absolute;width:24px;height:125px;background:url(http://i17.servimg.com/u/f17/13/20/23/83/previo10.png) center;z-index:100;cursor:pointer;} #carousel #next_button{position:absolute;right:0;width:24px;height:125px;background:url(http://i17.servimg.com/u/f17/13/20/23/83/next10.png) center;z-index:100;cursor:pointer;} #carousel #next_button:hover,#carousel .thumb:hover,#carousel #previous_button:hover{filter:alpha(opacity=70);opacity:.7} #carousel ul{width:100000px;position:relative;margin-top:10px} #carousel ul li{background:#ebebeb;display:inline;float:left;text-align:left;font:bold 12px Arial;border:0px solid #ccc;width:192px;height:90px;margin:0 2px 20px 6px;padding:6px} #carousel ul li a.slider_title{color:#222;display:block;margin-top:0;padding-top:0} #carousel ul li a.slider_title:hover{color:#1b5d97} #carousel a img{display:block;background:#fff;margin-top:0}

El siguiente paso es colocar el script, introduzca el siguiente código encima del código </ head>:
SCRIPT:   

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/> <script src='https://googledrive.com/host/0BwZ7Sm1QQc1lTnlVZG1DS3V0N3c/carousellite.js' type='text/javascript'></script> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgo6x9Am-Y3Ys0jREnzPUOrWl_Sj4F6jNixVy5taB_W7kGiQ9-QqBJvnCcblODr8Cqn9GZXFMshd5MCBA3bTHsRVwoWuMt0HEBLDpp3UXSwinnNf7WtliidkRwycGc337YujDoCSBbK43k/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 12; 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 = ["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 = day+ ' ' + m + ' ' + y ; var trtd = '<li class="car"><div class="thumb"><a href="'+posturl+'"><img width="100" height="90" class="alignnone" src="'+img[i]+'"/></a></div><h5>'+daystr+'</h5><a class="slider_title" href="'+posturl+'">'+posttitle+'</a></li>'; document.write(trtd); j++; } document.write('</ul>'); } //]]> </script>

Si en la plantilla ya existe un SCRIPT Query.min.js , el primer script del código de este segundo paso, no es necesario que lo instales, lo que sería:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>

El siguiente paso es llamar al slider para que aparezca en nuestro blog.
Esta quizás sea la parte más complicada para instalar porque cada plantilla es un mundo y un mismo código en una plantilla varía respecto a otra.
De todas formas y a modo de referencia sería: 
En plantillas nuevas buscaríamos el código: <div class='region-inner tabs-inner'> y justamente después colocamos el código de abajo:
En plantillas antiguas y a modo de referencia, buscaríamos <div id='main-wrapper'> y justamente antes colocamos el código de abajo:

HTML:

<div id='carousel'> <div id='previous_button'/> <div class='container'> <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=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: 4, start: 0, circular: true, btnPrev: &quot;#previous_button&quot;, btnNext: &quot;#next_button&quot; }); })})(jQuery) </script>

El paso final, sería ver en vista previa y observar los resultados, si todo está bien guardar. Si sigues los pasos anteriores correctamente,el slider carrusel aparecerá en su blog. Imprimir artículo