LATEST >>

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

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Sliders » How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger?

How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger?

How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger?

You may have come across on many blogs with content slider with cool slideshows. Just Wondering, I also need this slider for my blog, but don’t want to add every new post to it manually because it will take a huge time and I have also other to do. Then finally I solved this problem and also shared here. In this post we are going to discuss about How to implement this Light-weight EasySlider jQuery to slide a slider for blogger . This slider is a light-weight and responsive slider and free to use, which is also one of the most used Sliders in all kind websites and blogs.

As a blogger you need a widget or something that shows your recent post to make your blog a live and interactive. Recent posts slider is a best way to show of you blog’s recent posts as a slide show.You may see the slider such slider in many wordpress blogs but when coming to blogger it is certainly not much seen.If you are thinking that customization’s will be hard then you are wrong,this gadget is very easy to customize and very easy to add.You don’t need to add images,text or any links like other sliders all is Automatic :D.

Animated recent post is a fantastic way to present headlines updates to your readers.The effect of smooth scrolling attract readers and generate more clicks to your site.This gadget displays your most recent posts and includes a small description and also full post title with light background that also make it more cool then it is. But has the added bonus of using an animated effect that moves smoothly through the posts.T here are a lot of great tutorials discussing on how to add Animated Recent posts for blogger with thumbnails and Simple Spy, but most of the tutorials I’ve found are not really suitable for a beginner because as I said before that they want manually added data and this will not ask you anything anytime just after adding it.

How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger?
DEMO SreenShoot

Features:

1.) Awesome And Stylish Featured Slider.
2.) Simple To Use And Easy To Add.
3.) Quick Loading Time.
4.) J-Query 1.6 Added. (Don;t Add If You Have This One)
5.) Automatic Slider.
6.) Slides Will Be Taken From Latest Blog Post Automatically.
7.) Don’t Need To Update This Slider Manually.
8.) Slide Can Be Control Upto Your Desire.
9.) Post Title And A Few Words From Post Start Will Be Also Shown.
10.) Text Will Be On Slide With Light Background.
11.) Professional Look.
12.) Fully Customizable.
13.) You Can Control What To Show Or What To Not.
14.) Can Show It On Your Desired Page/Post.(Contact Us If You Want This Option)
15.) Manually Next/Prev Image Button Added.
16.) NoImage Thumbnail Will Be Shown If Your Blog Post Didn’t Have Any Image.
17.) Automatic Slider Will Be Turned Off If Used Manually.
18.) Latest/Recent Blog Post Will Be Fetched From RSS.
19.) EasySlider Code Used To Be Slide.
20.) Fully Changeable CSS Added.

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.) Press [CTRL+F] To Search </head> Code.
7.) Now Copy The Below Code And Paste It Before </head> Code..
8.) Click “Save Template” And Done.

<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'/>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
$("#slider").easySlider({
auto: true,
continuous: true
});
});
//]]>
</script>
<script style='text/javascript'>
//<![CDATA[
var showpostthumbnails_gal  = true;
var showpostsummary_gal   = true;
var random_posts       = false;
var numchars_gal = 150;
var numposts_gal = 10;
var img_width    = 550;
var img_height    = 250;
function showgalleryposts(json) {
 var numPosts = json.feed.openSearch$totalResults.$t;
 var indexPosts = new Array();
 document.write('<ul>');
 for (var i = 0; i < numPosts; ++i) {
 indexPosts[i] = i
 }
 if (random_posts == true) {
 indexPosts.sort(function() {
 return 0.5 - Math.random()
 })
 }
 if (numposts_gal > numPosts) {
 numposts_gal = numPosts
 }
 for (i = 0; i < numposts_gal; ++i) {
 var entry_gal = json.feed.entry[indexPosts[i]];
 var posttitle_gal = entry_gal.title.$t;
 for (var k = 0; k < entry_gal.link.length; k++) {
 if (entry_gal.link[k].rel == 'alternate') {
 posturl_gal = entry_gal.link[k].href;
 break
 }
 }
 if ("content" in entry_gal) {
 var postcontent_gal = entry_gal.content.$t
 }
 s = postcontent_gal;
 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 != "")) {
 var thumburl_gal = d
 } else var thumburl_gal = 'http://i1133.photobucket.com/albums/m596/abu-farhan/Images_no_image.gif';
 document.write('<li><div id="slide-container"><span class="slide-desc"><a href="' + posturl_gal + '"><h2 style="margin:10px 0px;">');
 document.write(posttitle_gal + '</h2></a>');
 var re = /<S[^>]*>/g;
 postcontent_gal = postcontent_gal.replace(re, "");
 if (showpostsummary_gal == true) {
 if (postcontent_gal.length < numchars_gal) {
 document.write(postcontent_gal);
 document.write('</span>')
 } else {
 postcontent_gal = postcontent_gal.substring(0, numchars_gal);
 var quoteEnd_gal = postcontent_gal.lastIndexOf(" ");
 postcontent_gal = postcontent_gal.substring(0, quoteEnd_gal);
 document.write(postcontent_gal + '...');
 document.write('</span>')
 }
 }
 document.write('<a href="' + posturl_gal + '"><img src="' + thumburl_gal + '" width="' + img_width + '" height="' + img_height + '"/></a></div>');
 document.write('</li>')
 }
 document.write('</ul>')
}
//]]>
</script>
<style type='text/css'>
#slide-container {position: relative;height: 250px;width: 550px;font-family: calibri;}
.slide-desc {background: transparent url(https://lh4.googleusercontent.com/-Gwj5tWXtzvg/U0dQmwblIJI/AAAAAAAANgg/PxMxSsyaKbw/s5/darkbg.png) repeat scroll 0 0;color: #FFFFFF;padding: 5px;position: absolute;text-align: left;bottom: 0px;z-index: 99999;line-height:20px;}
.slide-desc h2 {display: block;}
#slider li {width: 550px;height: 250px;overflow: hidden;margin: 0;padding: 0;list-style: none;}
#prevBtn, #nextBtn {display: block;width: 30px;height: 77px;position: relative;left: -30px;text-indent: -9999px;top: -150px;z-index: 99999999;}
#nextBtn{left: 550px !important;top: -225px;}
#prevBtn a, #nextBtn a {display: block;position: relative;width: 30px;height: 77px;background: url(https://lh4.googleusercontent.com/-EHVvsQ5fX9I/U0X8PVTpraI/AAAAAAAANdE/IoMKaNrBoSM/s30/Left-Double-Black-Arrow.png) no-repeat 0 0;}
#nextBtn a {background: url(https://lh3.googleusercontent.com/-OY9I57xINJA/U0X8PWoUexI/AAAAAAAANdA/5w-W78xEgqw/s30/Right-Double-Black-Arrow.png) no-repeat 0 0;}
</style>
<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->

9.) Then To “Layout“.
10.) Click “Add A Gadget” Where You Want To Add It.
11.) Now Scroll To “HTML-JAVASCRIPT
12.) Click “+” Icon To Add It.
13.) Now Copy The Below Code And Paste It To There.
14.) Leave The Title Empty.
15.) Click Save, Now You Are Done.

<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->
<div id="slider"><script src="http://www.exeideas.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script></div>
<!-- Automatic Latest/Recent Post Slider For Blogger Start By www.exeideas.com-->

 

Customization:

1.) Change auto: true, To auto: false, To Stop Automatic Start Slider.
2.) Change continuous: true To continuous: false To Stop Continuous Slider.
3.) Change var showpostthumbnails_gal = true; To var showpostthumbnails_gal = false; To Hide Post Pic In Slider.
4.) Change var showpostsummary_gal = true; To var showpostsummary_gal = false; To Hide Summary Of Post.
5.) Change var random_posts = false; To var random_posts = true; To Show Random Post Instead Of Latest One.
6.) Change var numchars_gal = 150; To var numchars_gal = any#; To Increase/Decrease Summary Length.
7.) Change var numposts_gal = 10; To var numposts_gal = any#; To Change The Post Count In Slider.
8.) Change var img_width = 550; To var img_width = any#; To Change he Width Of Image In Slider And Also In CSS Red Text Too.
9.) Change var img_height = 250; To var img_height = any#; To Change The Height Of Image In Slider And Also In CSS Red Text Too.
10.) Change www.exeideas.com With Your Blog URL.

From My Side:

Your questions,queries and feedback are always welcome.Also if you need any help about customizing this gadget then feel free to ask me.I’ll glad to help you…

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

168 Responses to “How To Add Automatic Recent/Latest Posts JQuery Slider For Blogger?”

  1. Aashish says:

    iam getting all the images 1 above the other plz tell the solution…

  2. Anonymous says:

    Thank you for your super post… awesome share

  3. Anonymous says:

    wow nice post.. 🙂
    can i know how u put “select all to copy” box on ur posts.. and keep it up the good work.

  4. Hi! How to align the script to the center?
    Very nice post!!! So useful 😉

  5. Joseph Chuks says:

    Pls i’m getting an error script error

  6. Joseph Chuks says:

    Done! No more error..but it doesn’t appear as a slide! help!

  7. Hello! Why there is no post’s title in my blog (http://choquestardoll.blogspot.ru/) ?

  8. really nice slider,but is there any way to reduce the speed of continuous function of the slider?

    • EXEIdeas says:

      Thanks For Liking Our Code. If You Want To Edit Its Time. Just Download The Second JQuery File And Edit It Then Upload It On Your Server. Its For Pro Only…

  9. hey plz help im getting images one above each other :-(..help me plzzzz

  10. Hi great code!
    I need help: I want it to show ONLY on the home page. How do I do it?

  11. This comment has been removed by the author.

  12. Ok man these tips worked. Now I only need to put in the centre and get the right button closer to the pic like the one on the left.
    How can I do that? I saw I need to add the code but I don’t know where.

  13. Thanks man now it’s in the center. But can you please tell me how to get that arrow near to the center? check please http://www.wivawrestling.com

  14. Gabriele says:

    Hey Muhammad, nice slider! It’s the best one I found! I edited it a little bit and now it shows only post of “slider” label as I want it to be (http://www.exeideas.com/). It’s all good… so far. I don’t know why the images of the slider are not well fixed (I didn’t edit anything of the original code, except the URL of the blog). There is lot of “grey space” on the top and on the left of the slider images… Could you help me fixing it? I’ve another request! I would like to change the “description” of the images to something like that http://london-creative.blogspot.it/ Where is the part of the code to do it? Thanks so much! You’re awesome!

    • EXEIdeas says:

      You Have To Use The Code Directly In Your Blog XML File Not In The Layout Gadget To Fix This Personal Error. Thanks For Mentioning, We Will Create This Style Slider In Our Upcoming Posts. Anything More From Our Side…???

  15. Gabriele says:

    Thanks for your kind reply! I’m good, I’ll wait that slider! 🙂

  16. imdad ali says:

    i Have a problem nothing is coming, no slider

  17. Jú Theodoro says:

    The images are appearing one above the other!
    The link for the blog is http://twodesignteste1.blogspot.com/

    pls help!

  18. Thanks so much for the code! I’m having just a couple of issues:
    1. My titles are showing up gray on the slider and I can’t seem to find how to change them. Descriptions (when I have them enabled) are white, but title remains gray and difficult to see.
    2. My slides don’t seem to slide all the way to the left. There’s about 75px of the previous slide still showing on the left side. Any idea why that is?
    Thanks!
    http://letthewaterrun.blogspot.com/

  19. TNTJ says:

    hi i replaced ur slider instead of old one , but ur slider is showing one by one , help me my friend

  20. Junaid Effendi says:

    hassan brother i need help i want this type of slider that can automatically update plus doesnot show those posts that are currently on the slider. Means http://fng-test-blog.blogspot.com/ visit this you will see theat the first post is also the first slide of it, i dont want it to show as a regualr post as far as it is on the slider. and the thing i want is like this site http://www.thisisanfield.com/. please help me.

    thanks

    • EXEIdeas says:

      This Is A Simple Slider With Text And Images. You Have To Update It Manually But Our Upper One Is Latest Post SLider That Will Automatically Add Latest Post In Slider From RSS.

  21. ace says:

    hello , thanks for sharing this but i am facing a little problem , slider is perfect but i want images and summary to cover whole black area , i have given image link below , u can see problem there
    http://s21.postimg.org/5fx2vry53/help.png plz reply

  22. Rina Ignacio says:

    Hi! Please tell me how to adjust the width and height without stretching the photo 🙂 Thank you 🙂 My blog is http://rinaignacio.blogspot.com

  23. thanks sir for the nice tutorial, i have problem with height of slider,it over a little bit at my menu navigation,how to solve it?thanks

  24. http://www.wivawrestling.com/ Why does the last post pic preview is messed up?
    How can I fix it?
    I always used that size for pictures and now is messed up.
    Can you please help me?

  25. Can you explain me please exactly how? I’m not sure I have understood.

  26. Imdad Ali says:

    Thanks for this articles my friends. Now i am following your blog

  27. Its really work my blog thanks. Buddy.

  28. Hi I want to add a Slide show in this page http://www.wivawrestling.com/p/prossimo-evento.html with all the posters you see under “EVENTI PASSATI” (and when I have new ones add them to the slide show), and when you click on the pic of the slide show you go on the youtube video.
    Also, I’d like the slide show to be big like the poster above all the others.
    Can you help me please?

  29. Hi Awesome slider code although mine does not show the post title, only the summary. How can I fix that?

  30. Ash says:

    Hey Hassan
    here is my blog http://fireflyshearts.blogspot.com/

    i want the slider to be in centre and a little big, how do i make it?

  31. Wow what a slider for a blog, this is so awesome, I never know that we can add a slider to blog before reaching here, thanks for sharing and giving valuable information

  32. Hey this is so awesome, i am searching for a horizontal menu for blogs, please share, thanks a lot

  33. Hi, dear friend. I used your slideshow in my blog
    http://newcaredentist.blogspot.gr/
    Thank you very much!
    I customized it a bit, by moving it to the center and by adjusting the position of the next and previous buttons, I have a few questions, though:
    1) how to show the post title on each post of the slideshow,
    2) how to change the time that each post shows, (make posts appear for a longer time),
    3) how to make the slider pause on mouse over,
    4) how to show buttons below the slideshow, circles or numbers, that show wich post is showing, 1st, 2nd, etc..
    Thank you in advance.!!

    • EXEIdeas says:

      Welcome Here And Thanks For Using It. You Have To Do The Following.

      First Add Below CSS…
      .slide-desc h2 {display:block!important;color:#fff;}
      For Timing, You Have To Host JQuery File Yourself And Edit It There.
      Currently Slider Didnt Have This Option But You Can Add After Downloading JQuery File.
      Its Only Available With Arrows. That Option Is Not Available.

  34. cstars_guest says:

    how do i slow down the slide speed

  35. Thank you very much for your answers, Muhammad Hassan. I wanted to apply your slideshow to a friend’s blog but I realised that it is not compatible with his blog! Thanks a lot!

  36. Thank you for your reply, Muhammad Hassan. My friend’s blog’s url is:
    http://aoratopedio.blogspot.gr/

  37. I added your code to
    http://aoratopedio.blogspot.gr/
    You can see the previous and next buttons on the header area, at the bottom.

  38. Good morning! I do not know where and how to add the code inside the template. Thank you very much, anyway!

  39. I sent you the template of the blog that I want to add your code to, have you received it?

  40. Good morning! I have not found anything in my mail inbox. I am sorry, which e-mail address have you sent it to? I checked the e-mail that I mentioned in my message, there isn’t anything in there…:)

    • EXEIdeas says:

      I Can’t Disclose Any Email Here That We Received So May Be Its Not Yours. We Are Receiving Many Email Daily About Many Codes And We Are Replying Them Too. If You Didnt Got SO That Mean We Didnt Received. Try To Sent Us Again On “support@exeideas.com & admin@exeideas.tk” Both And We Will Reply You With Different Email So Always Check All Email For Reply.

  41. Hello, i have a problem with the slidshow. the picture is not centered, you can see as the end of my blog. can you help me please ?

  42. Thank you, Muhammad Hassan! My friend – whose blog I wanted to apply your slideshow to – told me that he has found another type of posts slideshow and that he is happy with it, he wouldn’t like anything else for now. So, I am ok. Thank you very much for your time and for everything that you provide here for us! 🙂 Good evening!

  43. Hey man what happened to my arrows?
    I didn’t change anything.
    http://www.wivawrestling.com/

  44. Lovaine Tang says:

    i have a problem with the slider is it because of the slider or something else i have done wrong?
    this is my blog http://gerzworld.blogspot.com/ please let me know i think the problem is not related to this slider???

    it says inside the slider images of recent posts “look who’s popular you have reached your bandwidth please upgrade to pro”

    please help me : (

  45. Hi,

    I’ve used the slideshow for a friends blog and was wondering if i could only show the title of the post and not(!) the whole summary? Thank you in advance!

    Best,
    Fleur

  46. dita says:

    hi..thanks for sharing this code..btw how to show post title in my blog? here is my blog (mykoreandramavariety.blogspot.com) thank you 🙂

  47. dita says:

    Thank you so much..its really work on my blog 🙂

  48. Hi 🙂 Your slider is awesome, but I have one question, How to reduce space between post and slider? ( see here: http://prntscr.com/3il6w0 )
    My blog is http://probnibloginter.blogspot.com/
    Thanx in advance :))

  49. Pascal says:

    any problem with my comment?

  50. Samantha says:

    Hi, I am trying to add this slider to my blog but it doesn’t work. Can you help me please? It shows the slider but no posts. The blog is http://www.viewsfmwindow.blogspot.com thank you!

  51. Ghadeer says:

    It doesn’t work on my blog too!! any help?

  52. Trazh says:

    Not working for me at all. It did once, but then only arrows showing.
    Here:s my adress: http://trazhedpixels.blogspot.se/
    Its supposed to be above the post (in blue box), but its only white.

  53. I am web designer and for every new website i have used various slider but this slider is excellent, look awesome and perform brilliant thanks for sharing please share more so it will help me more … thanks a lot

  54. Hii, I can’t get it to work. Tried everything. Any advice?

  55. Naomi says:

    It doesn’t work on my blog! (www.littlekeystohappiness.com) 🙁

  56. Molly says:

    slider not workin!! 🙁

Leave a Reply

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