How To Add Label Slideshow With Thumbnail Blogger

Hello friends today in this post i am going to give you the best new Javascript gadgets for your blogger website the gadget is best for the magazine, news portal site and to other
we can use this method for label post of the blogger.

Before going to the tutorial, you can see demo in screen-shoot available easily In which you can see two arrows at sliders ends that are button to slide it manually. Still it will remain slide automatically. The rest of hottest features are listed below, before using the code, you must have to know about all of these.

Read More Feature Of This Gadget:

1. You Can Add It Anywhere In Your Template Or Layout.
2. Speed Up Loading Time.
3. Very Fast To Install And Easy To Use.
4. It Will Remain Sliding Between Your Allowed Latest Post From Label.
5. You Can Also Change JQuery Code According To Your Desire.
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. And Many More You Can Customize Inside the Javascript.

Now Lets See The Below Instruction How To Add To Blogger

1. Go to your blogger account and choose one blog name and click on that if have there multiple blogs
2. Now go to "Template".
3. And click on the "Edit HTML".
4. Now click within code box. or click on the "Format template"

5. Go there where you want to add this gadget of slider.

6. Now copy the all below code and paste it there. carefully

<b:if cond='data:blog.pageType != "item"'>

<style type='text/css'>
#carousel {
width:1000px;
height:185px;
margin-bottom:0;
position:relative;
display:block;
}
#carousel .container {
position:absolute;
left:49px;
width:920px;
height:185px;
overflow:hidden;
background:url(https://lh5.googleusercontent.com/-iFiEF7YBg2U/VSu5_07nAqI/AAAAAAAAAHQ/EW-1AT-vbHE/w20-h496-no/1.png) repeat center;
}
#carousel #previous_button {
position:absolute;
width:49px;
height:185px;
background:url(https://lh3.googleusercontent.com/-McWEDhCpVV8/VSu5_suUzYI/AAAAAAAAAHM/3k2aZJLq5Uk/w49-h264-no/2.png) center;
z-index:100;
cursor:pointer;
border-right:1px solid #ccc;
}
#carousel #previous_button:hover {
background:url(https://lh3.googleusercontent.com/-tf4VBcXXvts/VSu5_oEOJBI/AAAAAAAAAHE/R-HLhSzslcM/w49-h264-no/3.png) center;
}
#carousel #next_button {
position:absolute;
right:0;
width:49px;
height:185px;
background:url(https://lh5.googleusercontent.com/-zPFo-JxGnwU/VSu6BnzJzUI/AAAAAAAAAHk/oiFwa7PwVZs/w49-h264-no/4.png) center;
z-index:100;
cursor:pointer;
border-left:1px solid #ccc;
}
#carousel #next_button:hover {
background:url(https://lh6.googleusercontent.com/-fFHoPbriYMg/VSu6Bvvp_1I/AAAAAAAAAHs/yCpyljxtcQ4/w51-h264-no/5.png) center;
}
#carousel ul {
width:100000px;
position:relative;
margin-top:10px;
}
#carousel ul li {
background:#fff url(https://lh4.googleusercontent.com/-apujjmRqMIc/VSu6BfQfITI/AAAAAAAAAHc/jDN-IKsxzXM/w10-h100-no/6.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='https://kedar-adhikari.googlecode.com/svn/label-slide.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://lh5.googleusercontent.com/OXyUuNgWFNk4rS0Tb0TRfT8hQ2x4qXSF61CBm0yGRw=s300-no";
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("<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>

Now click on "Save template" go to your blogger and look there.

You Need To Customize Some Code Before The Saving.

1. Change "Your Label Name" with your desired label name that’s post you want to show in this slider.
2. Change CSS according to your desired.
3. Change Javascript code to your desired.
And finally don't forget to the save template.

Computer | Tips & Tricks

Spirits THEME

What's hot?

Thursday, July 23, 2015

How To Add Label Slideshow With Thumbnail Blogger

Search Here

Popular Posts

Fan Page

About Me

Navigation