How To Add An Automatic Blog Label Thumbnail Slider To Blogspot

Features:
1.) Awesome And Stylish Design.
2.) Speed Up Loading Time.
3.) Quick To Install And Easy To Use.
4.) SEO Friendly.
5.) Will Decrease Your Bounce Rate.
6.) Engage Your Readers In Your Awesome Articles.
7.) Based Upon Carousel Slider Code.
8.) J-Query 1.7.2 Added.
9.) Contain HTML-CSS-JavaScript-JQuery-Images Only.
10.) Automatically Fetch Latest Posts From Your Desired Label.
11.) You Can Control Your Post Count Easily.
12.) Automatic Slides After Your Desired Time.
13.) Visitor Can Also Move Your Post Manually Through Buttons.
14.) It Will Show Post Top Image Thumbnail And Post Title.
15.) You Can Customized It’s Design Via Easy CSS.
16.) You Can Also Change JQuery Code According To Your Desire.
17.) It Will Remain Sliding Between Your Allowed Latest Post From Label.
18.) You Can Add It Anywhere In Your Template Or Layout.
19.) You Can Bound It To Display On Your Desired Page/Post.(How To Display Gadgets On Your Desire Page/Post In Blogger?)
20.) Short And Easy Codes With A Lot Of Extra Customizations Easily.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To “Template“.
4.) Click “Edit HTML“.
5.) Now Click Within Code Box.
6.) Go There Where You Want To Add This Slider.
7.) Now Copy The Below Code And Paste It There.

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style type='text/css'>
#carousel {
width:950px;
height:185px;
margin-bottom:0;
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/AVvXsEh0zFLRN0cD7nVr4v1bscqJEXBcCJe7gCp8nF0lb5CN2A-jSvsWhk8BujDwc1C3RUOIFUjubT5QtmVTKAyT13I6AYDpk2puszJ4jB9wRK_sncRAe0a-Y_vNQuspWoa1lyJ6QqR9sjIZLuA/s1600/scroller-bg.png) repeat center;
}
#carousel #previous_button {
position:absolute;
width:49px;
height:185px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNek46KB6lS_vls8j-RliMys2-sUHPsMbtc4RmxHXWUmgg7u80V-EYFXsjhKKe8h0RB7tr2ggIEyc4nKoiz3XYkkM-FHLSAKVRGaqX5pV4Un49HRqtEbaVf02GOHJIIw5pycYucKEC4Po/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/AVvXsEjtxvFPCHb2TNRkjyulMx9v3ZjvMbKaurkASojGqhhDitzC5g1LPUFL4OKo1Omnb1S99S3mG_ZlH0LBLc68UYCBMgzVPuUycKbTw4ZB9_DyK0IMiVhrDQ_dgCwr_Ge568pKDeSAAMKUyng/s1600/prev.png) center;
}
#carousel #next_button {
position:absolute;
right:0;
width:49px;
height:185px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmdY7NeEyK7eM8vDniPzVt_QC6bBvEQsm_E_r3QBaELCg2QA12NudkjtjbFQyh8YzivszIiC0VccFV_hyphenhyphenRY-6IkasJfHxDCoArRPyYJzjGk0Neq7rON-O1aBx71V3UUcL4YwdRy3udVHc/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/AVvXsEgm4Sk2PTLchLwtKEdz1LE7eDS8tYHHwuV_k9BBO2WRhvBmKDokFOrwEruJPgCQ4EJeRz6Soesp5x-FQU2pggS2urjswTOm3bX0pLUkVXi_GVh-SaY8faKQ54OyxoYkF7IZ360OeFjGEiw/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/AVvXsEhwweQoxg-VU7nBT1cM4sZ4zTo_MsCJmiNB6WGQhvWA3fqsrNMd6SPHGvavPmVtJm_m0XVRholpr1obR8Q-kbBLaRZNkvF4DKmWkOcxYfNU0ZFjoUqcFERALXus5ebdXG7YtUO6AnRCbxQ/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;
-webkit-border-radius:4px;
-moz-border-radius:4px;
border-radius:4px;
margin:0 4px 20px 7px;
padding:6px;
}
#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;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function ($) {
$.fn.jCarouselLite = function (o) {
o = $.extend({
btnPrev: null,
btnNext: null,
btnGo: null,
mouseWheel: false,
auto: null,
speed: 200,
easing: null,
vertical: false,
circular: true,
visible: 3,
start: 0,
scroll: 1,
beforeStart: null,
afterEnd: null
}, o || {});
return this.each(function () {
var running = false,
animCss = o.vertical ? "top" : "left",
sizeCss = o.vertical ? "height" : "width";
var div = $(this),
ul = $("ul:first", div),
tLi = $(".car", ul),
tl = tLi.size(),
v = o.visible;
if (o.circular) {
ul.prepend(tLi.slice(tl - v - 1 + 1).clone()).append(tLi.slice(0, v).clone());
o.start += v
}
var li = $(".car", ul),
itemLength = li.size(),
curr = o.start;
div.css("visibility", "visible");
li.css({
overflow: "hidden",
float: o.vertical ? "none" : "left"
});
ul.css({
padding: "0",
position: "relative",
"list-style-type": "none",
"z-index": "1"
});
div.css({
overflow: "hidden",
"z-index": "2"
});
var liSize = o.vertical ? height(li) : width(li);
var ulSize = liSize * itemLength;
var divSize = liSize * v;
li.css({
width: li.width()
});
ul.css(sizeCss, ulSize + "px").css(animCss, -(curr * liSize));
div.css(sizeCss, divSize + "px");
if (o.btnPrev) $(o.btnPrev).click(function () {
return go(curr - o.scroll)
});
if (o.btnNext) $(o.btnNext).click(function () {
return go(curr + o.scroll)
});
if (o.btnGo) $.each(o.btnGo, function (i, val) {
$(val).click(function () {
return go(o.circular ? o.visible + i : i)
})
});
if (o.mouseWheel && div.mousewheel) div.mousewheel(function (e, d) {
return d > 0 ? go(curr - o.scroll) : go(curr + o.scroll)
});
if (o.auto) setInterval(function () {
go(curr + o.scroll)
}, o.auto + o.speed);
function vis() {
return li.slice(curr).slice(0, v)
};
function go(to) {
if (!running) {
if (o.beforeStart) o.beforeStart.call(this, vis());
if (o.circular) {
if (to <= o.start - v - 1) {
ul.css(animCss, -((itemLength - (v * 2)) * liSize) + "px");
curr = to == o.start - v - 1 ? itemLength - (v * 2) - 1 : itemLength - (v * 2) - o.scroll
} else if (to >= itemLength - v + 1) {
ul.css(animCss, -((v) * liSize) + "px");
curr = to == itemLength - v + 1 ? v + 1 : v + o.scroll
} else curr = to
} else {
if (to < 0 || to > itemLength - v) return;
else curr = to
}
running = true;
ul.animate(animCss == "left" ? {
left: -(curr * liSize)
} : {
top: -(curr * liSize)
}, o.speed, o.easing, function () {
if (o.afterEnd) o.afterEnd.call(this, vis());
running = false
});
if (!o.circular) {
$(o.btnPrev + "," + o.btnNext).removeClass("disabled");
$((curr - o.scroll < 0 && o.btnPrev) || (curr + o.scroll > itemLength - v && o.btnNext) || []).addClass("disabled")
}
}
return false
}
})
};
function css(el, prop) {
return parseInt($.css(el[0], prop)) || 0
};
function width(el) {
return el[0].offsetWidth + css(el, 'marginLeft') + css(el, 'marginRight')
};
function height(el) {
return el[0].offsetHeight + css(el, 'marginTop') + css(el, 'marginBottom')
}
})(jQuery)
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVoExjgC3tYhaWBqSy0I0jWgGkvvf3_cecbyTw8xfYEsKwUPeZfI-JMqYAihCl5XO3hMrqHIWZh9QQVl6nvljF4-fpaMxUIvuviAskp_lOnG1GsrqXRp-GUDHOFtzO89y8bPFUIuY3d8/s1600/no+image.jpg";
showRandomImg = true;
aBold = true;
summaryPost = 150;
summaryTitle = 25;
numposts1 = 15;
label1 = "Your Label Name";
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>
<div id='carousel'>
<div id='previous_button'/>
<div class='container'>
<script type='text/javascript'>
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>

8.) Click Save, Now You Are Done.

Customization:
1.) Don’t Add J-Query 1.7.2 If You Already Have It.
2.) Change https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgGVoExjgC3tYhaWBqSy0I0jWgGkvvf3_cecbyTw8xfYEsKwUPeZfI-JMqYAihCl5XO3hMrqHIWZh9QQVl6nvljF4-fpaMxUIvuviAskp_lOnG1GsrqXRp-GUDHOFtzO89y8bPFUIuY3d8/s1600/no+image.jpg With Your Desired Image To Show Where You Don’t Have Post Image.
3.) Change false To true If You Want To Show Random Image From Your Post As Thumbnail.
4.) Change  true To false Is You Want To Stop Bolding Title Text.
5.) Change 150 To Your Desired Summary Text Count. (Not Needed)
6.) Change 25 To Your Desired Title Text Count.
7.) Change 10 To Your Desired Post Count To Be Slide.
8.) Change Your Label Name With Your Desired Label Name That’s Post You Want To Show In This Slider.
9.) Change CSS According To Your Desire.
10.) Save and Done…