How to make an automatic Carousel slider based on labels?

Welcome to all, we will discuss how to create automatic Carousel slider based on your labels in blogger. All you have to do is only replace with your own label and the slider will work based on the label that you add in Edit HTML template. This widget "carousel slider" we made is very simple and we only used jCarousellite script without adding easing effects or mousewheel.

DEMO

Step-1. You must login to blogger with your account.
Step-2. After that select the blog that you want to add slider.
Step-3. Go to the template >> Edit HTML and check the expand widget templates, don't forget to backup your template first.
Step-4. And then place this following codes above ]]></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/AVvXsEjYs5U9J-QN3gvqOSF8V7-7WC-LTS5ZMDD9MnaM_iE_ampyR3b0nc_YwtRsgIJiE73OW4C9ugLp5WHfW162EurJeFMgLiIamt9lJs0JbfVa2hHqPeGi5Qe4V2iN_GAsRR_CgFAqbvnpMj8/s1600/scroller-bg.png) repeat center}
#carousel #previous_button{position:absolute;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg7Fl5otOBfBSGgp-bxWCxLRrima6To2iFIDtPzbl5PnP3c-WzcfGfaYvGB8H3TEswwYW_zONIZJvXA0py_ZTez-WzYoC8sVEEqi9sDlQhYfKrlmxCnsjDE9ucz71O4u7ocFZkJYJcv9J8/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/AVvXsEgFeumWbN5eLkaJ7zw2p4uAx2zJLsFQSmLD0ElnlnABuYjgyrZZIs60uuErmp2q24UWbOY-AbiWNmdypN5RyBToRi9wgJDQKvficH724pwVt8shOpNIl4vMOEETvOs-e6kxzLG_fzg_974/s1600/prev.png) center}
#carousel #next_button{position:absolute;right:0;width:49px;height:185px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFQTEYgSe0_eohKqTqUjABIlymC7prAzmeL2uhBsZ4FMb6YznVatS_1DtHAU1745yj7njCbHzGg-3UxFd6EIT_7mcM6V3ibcKc3aL_x5HyIUvz46K7r5G6AB8SPcAsr5GqEb-VBgy29Jg/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/AVvXsEiZrFq0Co2NuaOH0PAL3GQqMdqMoS3wjYq9_LwTVTDXlAzz4e3WihtNua9-y0rli706lGW3hHWrReZIYBbfEFpdUjD08TInQD5YAyCx_ksCsH3QL5W0pTp2b4g3kRR16YCnrhDw3EUKL3g/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/AVvXsEihe6D49nEdi5tEieipw_S5jH0CJdVD6tqC87ZHFJ8k6jmbBXNimh_NJgp9QFPmbIDtiIuAYuRAmgDhi9fRRerVBuzQ3R_B7kpqXivoCSWiWVfP3TqLuby4oNc_MmJmj1ysJlI2KKAkBgw/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 red color above, that's the width and height of the slider in the demo that we made, change with your own size depend on your template width.

Step-5. 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/AVvXsEjqr11yBFSVs2uUrlrl7gHPutqYFWzntFqHWx2b2Mf5Us56x-SxiFTPLOldZM-EPRBwCvF6Lalg7JRpb8P0cPhGypEau0cagMFL6ypcJGFbZO5_0PmE3vL9B2r9beqY_nMzy4meNgBqaDQ/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 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>

Notes: See the red URL script above, that's the latest series jQuery.min.js script code that we use to made this slider. And if you've found jQuery.min.js although with the different series in your template, no longer need to insert the red codes. There must be only one jQuery.min.js in your template, it is up to the serial number, if possible the latest version.

Blue code (15) : amount of your post that display in the slider. news was a label that I choose to show up in slider.

Step-6. Next step you must call the slider to appear in your blog. Place this following code above <div id='main-wrapper'>:

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

You can also put the following codes in the bottom of your navigation menu or you can also placed in your footer side, that's depend on your needs.

Step-7. The final step, 'Save templates' and see the results.

Subscribe Us or like us on Facebook if this tutorial really helped you. Don't miss to apply this automatic Carousel Slider in your blogger template. If you have any queries, just drop the comment in comment section. Enjoy!