#carousel{width: 950 px;height: 185 px;margin-bottom:0px;position:relative;display:block} #carousel

In this tutorial I will discuss how to create automatic Carousel slider based on your labels in blogger. All you have to do only replace with your own label and the slider will work based on the label that you add in Edit HTML template. I made this carousel slider was very simple and only used jCarousellite script without adding easing effects or mousewheel.
DEMO You must login to blogger with your account After that select the blog that you want to add slider. Go to the template >> Edit HTML and check the expand widget templates, don't forget to backup your template first. And then place this following codes above ]]></b:skin> :
#carousel{width: 950 px;height: 185 px;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/AVvXsEglUqJy8A27m0J60pt3GKFiNLs5A577MF4nL_P3E27asCetacT7b-EBHzGGT6Z06Xs5LxMUY-Llfzrc4jh46RnH331N9g3PWJ4x5ad8IfKeaUzNPqlKXAnhoSDG4QLeikSZ7Gx4c5GaiIs/s1600/scroller-bg.png) repeat center} #carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiilVSHCKdVaNJNj9zZwGfG1KaUZhY7SrtUIrCSm16xdjpYH7MvDURCsHzDRcFkdHu1UNMlVdYtCQd-JRzGshpL06fP_H5vJ6unJh1oyxodcfSpJKuOAEk6GX72tAWoWvXQqqYVIhJsW9c/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/AVvXsEj-QgD67fMZsylXHEVPIJE1tHQIPZbf9g9SfqpyNylP5XwYydHnM6CEvh4z92mFQzqWlx5G-2kpkbWVYKPkeHroujO2EBEPXB4zPEehT2ciOPE-FhvaRzlSbyWid67kYnnNvd9Rh5dUaXM/s1600/prev.png) center} #carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhv8StBDS2OAN33ihFtlHT6QGvyMJCohyHVf42Isp9j3d04NKvlFAtlHRiqQIFF64h47tGxm8dDnDjQTyF1nKRUcN7r_gUm9dWZ9DCG9VtRDj20kL_DYPwbRdWX-ZzYwFDjFqR6jhlc_Tk/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/AVvXsEgYiQ7Pk0jwgAdhnSbrrNGcrBcsHeNTas-zVtXtwtzcOMLf29pd4X2j7FlMlujJDK4f9e8c7XVl-aMo5HLIyYpx5yCH5-gjvCXULKrqg6TAYlUmHI_QGiOQ8m56fmc1l6mrN8CPiyqT9ZA/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/AVvXsEhthdcaXtkx_-kIIKG8PPAH7WM1NTRMfQS9xLlS10UZF5I9fcqNDLK6MHMHHeQBSBVSgAxViJQlum3NVqY-qw2KU4X6HtIWCj-KfYYcdXaRaiA7J3sHnza8ibPDXvvNkdb1MtoT1CbOYws/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}
Look at some codes with the blue color above, that's the width and height of the slider in the demo that I made, change with your own size depend on your template width. Still in Edit HTML, add this following code above </head> :
<script src=' http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js ' type='text/javascript'/> <script src='https://masolis-javascript.googlecode.com/svn/trunk/carousellite.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ imgr = new Array(); imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB02EFfrZ2Q7wlWPTV9BNTbOV5Q20dVdy1bvU27xJatyyAsYuQE0dGvVE2ryQvW4Fxkrx7nbW0VFHq-1awQW1vfxMzqtcYwA1Ztmo1hTW97YtwXrOTRQ4_sYAeGRojevvu6mennX8bcV4/s1600/no+image.jpg"; showRandomImg = true; aBold = true; summaryPost = 140; summaryTitle = 25; numposts1 = 15 ; label1 = " news "; 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 lock and lock 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] lock and lock = 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]; lock and lock for(var u2=0;u2<month.length;u2++){ lock and lock if(parseInt(m)==month[u2]) { m = month2[u2] ; break; } } var daystr = day+ ' ' + m + ' ' + y ; var trtd