Slider Carruser fácil para nuestro blog. ~ Blogueandomiblog

Vamos a mostrar como podemos poner un slider fácil en nuestro blog.

Como siempre digo antes de modificar algo de nuestra plantilla, tenemos que hacer una copia de seguridad por si algo no nos sale bien.
Puedes verlo paso a paso en este link.
Y ahora vamos a hacerlo paso a paso.

1ª nos vamos a Blogger > Tema > Editar HTML

2º Busca este código ]]></b:skin> y justo encima pega este código:

#carousel{width:950px;height:185px;margin-bottom:0px;position:relative;display:block}
#carousel .container{position:absolute;left:49px;width:950px;height:185px;overflow:hidden;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpiPfi-sMqTqaBUs3Je_LNkF7IK9FjicTosMXNhnsb9ZY5HHLK8-u3lAd8r_ePz6BMjzHYEvpLixrDHOakT1sZVRU0SueB6gzXVRO6ge9EwVQ7f_IUx5HoeqEldblV4lEShHSzlV86Muw/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuzIUFIh2rzIJ9nc0A2OhexJigmjMdvVMxg4Rzw1G7gWjBMieSXNLhRnMP00InB_GZV1O5NzEAYqeHvKnQGyMj78_WBmFNZkyCiFNFGJ-6I0h06bKghFmDmC02ptSEWah_tOSPvDXzsSk/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/AVvXsEirQftpQ5QWqSGJRowMWCTxoylgk2-WxaLlzs3P_cqdm8JAoswe4waVUR_uqqW7FOI18EJvlYgaGIJwjKgAnfqJ0vufaFUSEQuAvWlGExRN-tbFl6KJAITalk2jnqPmK_hlHkoHHFa26EA/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgENimvGN3BkQqix4QvEzcSL_6DB59fpJNZ8yGpxjgRiFbtemqwfkKzCCbFwHwBu1JgHRlhyphenhyphenQ_kBLt8g1DiT2WSYZSb6GporMDUABbXa499CTmrgNA5hNiubl1wKw8JGhtumMC8BclMMWY/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/AVvXsEiTb2XzNEYiH0XxBU-ChnXiLrahm2xE54WPOJi9WUu73mhLYFB2zfiQSLRHXX_UlFUA3YAXPj07RR4Zh-1vb_9y47AZm4DkF_5g8fTiATbaM5w8KDwlSImb7FnR2lBqEB05_hdfGcl3HC4/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/AVvXsEjY5Krdou3aoRrp9jqD-lBtW20tr1Hze4D_RoqZ3aP92nX-KKBD6Lud6GKbmxfapoMTRVk9Apr1HVME1oNtKaikspUjDmwWtVkb-f905EThQdjYLMhmbbzygq9sSeuJpK48wLoeg39428o/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,
Podemos modificar la anchura y la altura de nuestro carrusel según nuestra plantilla.

3º Ahora buscamos el código </head> y justo encima pegamos este otro 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/AVvXsEj2rBsmkuRA8T9sxa4ZhHwlmeyrGY5UciAxjBWXNVatt5-VVqEcx4rPMd2Z7mn5kzHiGtWONsyoPKvjQha8wdfd_KUhsudPgynjQpOCVZGUe6pV8MQZCatzIqyFUvGXi_odimhgVkCkCVo/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>

Para cambiar los números de post a mostrar utilice 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.

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

<b:if cond='data:blog.pageType != "item"'>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script>

document.write("<script src=\"/feeds/posts/default/-/"+label1+"?max-results="+numposts1+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");

</script>
<div class='clear'/>
</div>
<div id='next_button'/>
</div>
<script type='text/javascript'>
(function($) {     $(document).ready(function(){
$("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 800,
    visible: 5,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)
</script>
</b:if>