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.
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.
Table of Contents
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 != "item"'> <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://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(https://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(https://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(https://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(https://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(https://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='https://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("<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>
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…
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
We Check But Cant Find Where You Are Using This?
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
It Is Conflicting With Your PreInstalled JQueris. Please Try To Remove One By One To See That Which One Is Extra…
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
We Checked And Also Added A Live DEMO. Here You Can See That This Slider Is Working Awesome. This DEMO Is A Free Blogger Template. You Can Download It From Here And See Its Code Too.
Download Free Repomag Blogger Template
I want this slide to show a specific label, how do i do it?
🙂
See The Whole Code Again And Change The Label With Your Label Name…
hey! i love the widget, but after insert the code, i see only white widget- no label found! only white rectangle. why dear brother?
Ok! first thanks for your help bro! this is my url. http://www.geezbet.com. and i didn’t understand where i will add labels. Thanks!
Can U Leave Ur Blog URL? Did You Add Correct Label?
Add “News” Instead On “Your Label Name” In The Upper Code Then Try Again…
I try two and more time but it cant’ work! Is there other way that you help me? Thanks for your help!
Send Us Your Template XML File At “support@exeideas.com”
Hi Muhammed!
I send the template! i hope you will help me!
Thanks very much! I will wait your answer!
Thanks again!
Bye!
Check Out Your Inbox…
WOOOOOOOOOOOOOOOOOOOOW
Now It works WElllllllllllllllllllllllllll!
Thaaanksssssssssssssssssssssssss
My dear friend and brother!
I appreciate you! You are wonderful coder!
Thanks again!
Welcome Here And Thanks For Liking Our Support.
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
I Am Not Able To View My Code There. Please Mention IN The ScreenShoot…
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!
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…
Hello , I want to try dis but only on homepage not blog post or any page ??
Use Blogger Conditional Tags From: How To Display Codes On Your Desired Page/Post In Blogger?
I just try it on my blog and also mention my label but in results i only see widget layout not my label post ??
Share Your Blog URL So We Will Check It There…
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.
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.
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
Hi Bro,
My issue is exactly same as Mr. Geez Bet one…can I send the template HTML to you?
Thanks
Where You Added Our Codes? We Are Not Able To See Our Codes. If You Can Do It Then Send Us Your XML File, We Will Add This Code It Your Template…
Hi Muhammad Bro,
I have sent you email with the template attached.
Thanks in Advance
Your Template Is Edited And Replied To Your Email…
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.
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.
This comment has been removed by the author.
Can You Share The URL Where You Are Adding This?
Hi!
Can you help me? The slide is not working 🙁
This is the only thing I can see: – See more at: https://www.exeideas.com/2013/07/automatic-blog-label-thumbnail-slider.html#sthash.EXJqlT0z.dpuf
http://karurosuphotoshop.blogspot.de/
Code Fixed. Copy Past Manually Not Through Button…
Well, now I can see something but it’s blank, my pictures are not there :/
You Are Not Adding Your Label Name. First Add Your Label Name To Proceed. See The Customization Heading…
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.
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.
I’ve sent you an e-mail with the template attached 🙂
Email Received And Replied With Updated Template. Template Fixed And Checked. Now Working.
it does not working in this site http://www.diratz.blogspot.com
You Didnt Added Our Code, Add It On DEMO Blog Then Contact Us…
how to change width of slide?
please help me
Change Width On width:950px; With Your New Width And Also Change width:895px; Where You Have To Put 55px Less With Your New Width.
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
Your slider is working fine on your blog. Its not hiding…
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?
Use This Two Time And Skip CSS Again…
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
Can you send us your template file where you are adding our codes…???
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
This is an auto picking latest post from a label where you cant control anything except label and count. NOw what else you want?
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
actually it doews work but i can not choose the posts on the slider with 2 or 3 labels inside..i can only see it not choose
You have to add it two time with different CONTAINER div name. Rest will be same.
No, add the whole code again but change it main DIV name everywhere in the code only.
what should changed exact ! when we already using recent post j query widget
You should just copy the code again and change the main DIV container name so this will effect as new.
I fixed it, and i can see the widget now, but not the post of the specific label. ¿Any tips?
Can we see the blog where you have our code?
hello friend, there’s no way to display my post images. What am i doing wrong?
On which blog you are using it. Share your link…???
on this blog http://konstantinosomegas.blogspot.gr/
Your Images Are Not In Your RSS Feed.
you are absolutely right. Thank you very much
Welcome here and thanks for understanding…
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?
Its working on your URL…
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.
Means you want to edit slider or want to create a new code?
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
This is a vertical slider widget where you can add anything easily. Try to add Awesome JavaScript News Slider Widget For Blog And Website
thanks very full brother,
i put your code in my blog (http://zonafreedownloadgratis.blogspot.com/), it works!!
thanks you so much
Welcome here and thanks for reading our article and sharing your views.
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.
Add our code directly in template not in Widget…
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.
Contact Us Via Email And Attach Your Template XML File.
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.
Welcome here and thanks for contacting. You will be helped there…
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?
Yes. You have some previous JQuery code that is interrupting our code…