LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders » How To Add An Automatic Blog Label Thumbnail Slider To Blogspot?

How To Add An Automatic Blog Label Thumbnail Slider To Blogspot?

How To Add An Automatic Blog Label Thumbnail Slider To Blogspot?

After our previous post about How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger? Here in this tutorial I will share a new and awesome code of automatic blog label thumbnail carousel slider for your blog to make it stylish and also decrease your blog bounce rates and increasing blog engaging with your visitors. All you have to do only replace with your own label and the slider will work based on the label that you add in the given code. This widget is only applicable for Blogger templates only.

There are many features added in this slider and all of those are very useful and needed. Like you don’t have to update this slider after your every new post, it will automatically fetch your latest post from your RSS And will add it to his slider. These post will be shown as thumbnail and the title only that are ok to attach a visitor to click on it and to open it.

From this you can also increase your SEO too like it will help  you to decrease your bounce rate and also will increase your page-views and time on site count. You can engage your visitor in your awesome posted and it will also change your template style into awesome.

Automatic-Blogger-Label-JQuery-Slider

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.

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(http://2.bp.blogspot.com/-i9rfuXWNIjo/T5LAemTP3XI/AAAAAAAAArY/r7FcfxzgZpk/s1600/scroller-bg.png) repeat center;
}
#carousel #previous_button {
position:absolute;
width:49px;
height:185px;
background:url(http://3.bp.blogspot.com/-APGScJbAlLM/T5LDZ9LDgkI/AAAAAAAAAr4/vGy7EquPGME/s1600/prev.png) center;
z-index:100;
cursor:pointer;
border-right:1px solid #ccc;
}
#carousel #previous_button:hover {
background:url(http://3.bp.blogspot.com/-4wNqeM6eRvY/T5LGCrdA9iI/AAAAAAAAAsE/4rjwULz47WU/s1600/prev.png) center;
}
#carousel #next_button {
position:absolute;
right:0;
width:49px;
height:185px;
background:url(http://1.bp.blogspot.com/-pSHFy8ff1R0/T5LDZHkHIzI/AAAAAAAAArw/PCfZ762nK3E/s1600/next.png) center;
z-index:100;
cursor:pointer;
border-left:1px solid #ccc;
}
#carousel #next_button:hover {
background:url(http://2.bp.blogspot.com/-vSaPjyDhEMI/T5LGB-g1_lI/AAAAAAAAAsA/wyUPBLWY15E/s1600/next.png) center;
}
#carousel ul {
width:100000px;
position:relative;
margin-top:10px;
}
#carousel ul li {
background:#fff url(http://3.bp.blogspot.com/-NsKF7TyEX7I/T418sIGTo7I/AAAAAAAAAnc/OdQmhV73piY/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] = "http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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 http://2.bp.blogspot.com/-uitX7ROPtTU/Tyv-G4NA_uI/AAAAAAAAFBY/NcWLPVnYEnU/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…

You Like It, Please Share This Recipe With Your Friends Using...

87 Responses to “How To Add An Automatic Blog Label Thumbnail Slider To Blogspot?”

  1. sheethal rao says:

    hi
    its very good,Its so useful for my blog http://www.thecinesizzlers.com,Am trying so days to put on my blog.but its not working on my blog.please provide me solution at:mbasheethal@gmail.com

    Thank you so much if u provide me solution

    Regards
    sheethal

  2. sheethal rao says:

    hi
    First of all thanks for responding my query.i would like insert Label Code in between my blog java slider and multi tab.please provide me solution sir

    Thank you so much if u provide me solution

    Regards

    Sheethal Rao

  3. sheethal Rao says:

    hi
    plsease please helpme out for , I tried removed all my jquery pluggins but no use, also i can tried for my new blog with no widgets,just fresh one but also not working , may be some other issue, please look into issue, solve the problem,

    please help me out for this issue

  4. I want this slide to show a specific label, how do i do it?
    🙂

  5. Geez Bet says:

    hey! i love the widget, but after insert the code, i see only white widget- no label found! only white rectangle. why dear brother?

  6. Yomi Adeyemi says:

    Hi, I have the same problem as Geez Bet. Could you tell me how you changed the code in his case?
    my URL is http://www.africandynamo.com/

    the widget is at the bottom

  7. Hi Muhammad,
    I tried your slider on my blog and after some initial difficulties (I must have placed the second code in the main html code not as a widget) it works great. Now I would like to extend it and use 2 or 3 such sliders on my blog (each for different label). Do you have any idea how to do this because simpy copy-paste and add label2 doesn’t work?

    Regards!

    • EXEIdeas says:

      Yes, You Can Add Unlimited Labels On One Page Via Adding Second Codes Again And Again And First Code Only For One Time. To Get The Updated Code, Send Us A Email So We Will Send You The Updated Code There With Some Tweaks…

  8. Hello , I want to try dis but only on homepage not blog post or any page ??

  9. I just try it on my blog and also mention my label but in results i only see widget layout not my label post ??

  10. Suja Ram says:

    Hi,

    I just replaced the imgr with my .jpg URL, added about 20 URLs starting from imgr[0] to imgr[19]….but I am getting only an empty box with the arrows appearing in the left and right….can anyone please help…

    Thanks in advance.

    • EXEIdeas says:

      Its Automatic Content Slider. You Don’t Have To Add Content Manually. Just Customize What To Say Only. Still Problem, Leave Your Blog URL Where You Are Testing This.

  11. Suja Ram says:

    Hi,

    Thanks for the reply.

    My blog URL is http://www.indianvegkitchen.com/, i tested in Firefox,IE and Chrome. The problem still persists.

    Thanks in advance

  12. Suja Ram says:

    Hi Muhammad Bro,

    I have sent you email with the template attached.

    Thanks in Advance

  13. Suja Ram says:

    Hi Bro Muhammad,

    Thanks a lot, received your email. Now its working fine, I may need to do little adjustments in placing the slider inside my blog. Very kind of you for your timely help, appreciate your expertise.

    • EXEIdeas says:

      Welcome Here And Thanks For Liking Our Editing. Now You Can Place Them Anywhere In Your Blog. Just Move Second Code Where You Want To Show It.

  14. -=ADMIN=- says:

    This comment has been removed by the author.

  15. Karurosu says:

    Hi!

    Can you help me? The slide is not working 🙁

    This is the only thing I can see: – See more at: http://www.exeideas.com/2013/07/automatic-blog-label-thumbnail-slider.html#sthash.EXJqlT0z.dpuf

    http://karurosuphotoshop.blogspot.de/

    • EXEIdeas says:

      Code Fixed. Copy Past Manually Not Through Button…

    • Karurosu says:

      Well, now I can see something but it’s blank, my pictures are not there :/

    • EXEIdeas says:

      You Are Not Adding Your Label Name. First Add Your Label Name To Proceed. See The Customization Heading…

    • Karurosu says:

      Sorry to bother you again, but that hasn’t changed anything. I’ve added a label (slider) which I’ve given to the pictures I want to show but nothing’s happening so far.

    • EXEIdeas says:

      We Short The Code. Now You Have To Add This Code On Your That Place Where You Want Slider. Its Personally Checked And Working. Try This With Changing Label Name With Your One. If Now Working Then Send Us Your XML File So We Will Add It There.

    • Karurosu says:

      I’ve sent you an e-mail with the template attached 🙂

    • EXEIdeas says:

      Email Received And Replied With Updated Template. Template Fixed And Checked. Now Working.

  16. thong says:

    how to change width of slide?
    please help me

  17. Rai Shahnawaz says:

    Hi
    i add your code correctly
    and also add label only slide design show but images not display when i refresh page then for 1 second images show in slider and then disapper
    kindly help me at raishahnawaz@yahoo.com

  18. Shayna says:

    I used this slider, and I want it to use more than one label for the slider on my homepage, how do i do this?

  19. Shayna says:

    ok so i used the whole javascript twice and then i got 2 of everything like the next/previous buttons and another slide container….. I tried deleting the cdata open and closing cuz it was giving me an error now I dont have any posts showing

  20. vijaykumarcmeseo says:

    i came from google thanks for the tutorial but it is autopost i mean if any thing post it is appearing on the slider i want only some posts i mean i want to add gadget not to add it in html i thnk u understand my problem

  21. panos says:

    can i have two labels on one slider??
    it is very important to know cause i put this

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

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

    (function($) { $(document).ready(function(){
    $("#carousel .container").jCarouselLite({
    auto:4000,
    scroll: 1,
    speed: 1000,
    visible: 6,
    start: 0,
    circular: true,
    btnPrev: "#previous_button",
    btnNext: "#next_button"
    });
    })})(jQuery)

    and it does not work

  22. todaypatrika says:

    what should changed exact ! when we already using recent post j query widget

  23. Bastian says:

    I fixed it, and i can see the widget now, but not the post of the specific label. ¿Any tips?

  24. kostas says:

    hello friend, there’s no way to display my post images. What am i doing wrong?

  25. kostas says:

    you are absolutely right. Thank you very much

  26. Rose says:

    Dear sir, It is so beautiful slider. But after adding this carousel, my news ticker of blog is stopped. What is the solution to solve this problem? or how can we scroll the news ticker too?

  27. Ganesh says:

    Dear sir, It is scrolling horizontally. I wanto scroll vertically on vertical frame. now what will be the change of this code for blog? Kindly help me sir.

  28. Ganesh says:

    I want to edit the code which you have published to make vertical scrolling with vertical frame. Actually I want to make a scrolling images like the right side scrolling of this webpage:- http://www.esamata.com. I hope you help me to make such type of image scrolling code for a blog. Thank You

  29. thanks very full brother,
    i put your code in my blog (http://zonafreedownloadgratis.blogspot.com/), it works!!
    thanks you so much

  30. hendri says:

    I have searched for auto schrolling horizontal recent post slider for quiet sometimes and I found your blog. However it is not working in my blog – http://sentosatraveler.blogspot.co.id/. There is nothing in it! Only white rectangle. Just like some of the above comments. How come dear brother? Begging for your help.

  31. Hendri says:

    ups, i am not familiar with the template’s HTML. I never touch it. I used to copy paste in widget’s HTML only. However, I wil try and make my template copy first. But can you tell me where to put (after what words or pharase) the code if I want to put the slider right after the main post, as the first footer widget. Anyway, thanks for the quick respon Bro.

  32. I have sent e-mail to admin@exeideas.tk, and also attached the template’s HTML. For your kind attention let me express my great gratitude.

  33. hello my blog is http://www.yannidakis.net/ and it seems I can’t make the changes I want. I’m guessing that I am running twice the ajax….
    how can I remove it?

Leave a Reply

Your email address will not be published. Required fields are marked *