Monday, 2 April 2012

Automatic Recent Posts Slider With jQuery For Blogger



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.This widget is shared by Abu-Farhan and using my own tricks further I customized this plugin to works perfect with your blog.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.  Here I am giving a tutorial about adding recent post slider to blogger.First take a preview on slider.

Live Demo ▼


How To Add This Slider To Blogger?


Step 1 - Applying Styles


  1. Go to Blogger Dashboard > Design > Edit HTML. (In new User Interface It Is - Dashboard > Template)
  2. As always download a copy of your template first.
  3. Now find for ]]></b:skin>
  4. Add below code just before ]]></b:skin>

/* START EasySlider By helperblogger.com */

#slide-container {
    height: 360px;
    position: relative;
    width: 480px;
}

#slider {
    height: 360px;
    left: 25px;
    overflow-x: hidden;
    overflow-y: hidden;
    position: relative;
    width: 480px;
    font-family: calibri;
}

.slide-desc {
    background: transparent url(http://i195.photobucket.com/albums/z105/dantearaujo/darkbg.png) repeat scroll 0 0;
    color: #FFFFFF;
    padding: 10px;
    position: absolute;
    right: 0px;
    text-align: left;
    top: 0;
    width: 200px;
    z-index: 99999;
}

.slide-desc h2 {
    display: block;
}

.crosscol .widget-content {
    position: relative;
}

#slider ul, #slider li,

#slider2 ul, #slider2 li {
    margin: 0;
    padding: 0;
    list-style: none;
}

#slider2 {
    margin-top: 1em;
}

#slider li, #slider2 li {
/*

define width and height of list item (slide)

entire slider area will adjust according to the parameters provided here

*/
    width: 480px;
    height: 360px;
    overflow: hidden;
}

#prevBtn, #nextBtn,

#slider1next, #slider1prev {
    display: block;
    width: 30px;
    height: 77px;
    position: absolute;
    left: -30px;
    text-indent: -9999px;
    top: 71px;
    z-index: 1000;
}

#nextBtn, #slider1next {
    left: 520px !important;
}

#prevBtn, #nextBtn, #slider1next, #slider1prev {
    display: block;
    height: 77px;
    left: 0;
    position: absolute;
    top: 132px;
    width: 30px;
    z-index: 1000;
}

#prevBtn a, #nextBtn a,

#slider1next a, #slider1prev a {
    display: block;
    position: relative;
    width: 30px;
    height: 77px;
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/prev.png) no-repeat 0 0;
}

#nextBtn a, #slider1next a {
    background: url(http://i195.photobucket.com/albums/z105/dantearaujo/next.png) no-repeat 0 0;
}

/* numeric controls */

ol#controls {
    margin: 1em 0;
    padding: 0;
    height: 28px;
}

ol#controls li {
    margin: 0 10px 0 0;
    padding: 0;
    float: left;
    list-style: none;
    height: 28px;
    line-height: 28px;
}

ol#controls li a {
    float: left;
    height: 28px;
    line-height: 28px;
    border: 1px solid #ccc;
    background: #DAF3F8;
    color: #555;
    padding: 0 10px;
    text-decoration: none;
}

ol#controls li.current a {
    background: #5DC9E1;
    color: #fff;
}

ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus {
    outline: none;
}

/* END EasySlider By helperblogger.com */


You can edit above CSS values as you wish.You may use our HTML Editor to see a live preview of your changes.(Note - If you are editing this gadget in HTML Editor then you have to add all three codes simultaneously in editor)

Step 2 - Adding JavaScript


  • Now find for </body> tag
  • Add below code just after/below </body> tag.

<!-- Start easy content slider by helperblogger.com -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js' type='text/javascript'></script>
<script src='http://accordion-template.googlecode.com/svn/trunk/easySlider1.7.js' type='text/javascript'></script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
 $("#slider").easySlider({
 auto: true,
 continuous: true
 });
});
//]]>
</script>
<!-- End easy content slider by helperblogger.com -->


Now save your template.

Adding The Gadget

  • Now go to Page Layout
  • Add a Gadget > HTML/JavaScript
  • Paste below piece of code and save it.

<div id="slider">
<script style="text/javascript" src="http://code.helperblogger.com/easySlider.min.js"></script>
<script style="text/javascript">
 var numposts_gal = 6;
 var numchars_gal = 150;
 var random_posts = false; // random posts
</script>
<!-- replace with your web address (marked with red color) -->
<script src="http://yourblog.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=999999"></script>
</div>



  • Now replace yourblog.blogspot.com with your own blog url.[Code Line - 10] (Only change blog URL don't change any other things.


  • To change number of post find this var numposts_gal = 6; line in above code. (Code Line - 4)


  • If you want to change number of characters to show in description find this piece of code var numchars_gal = 150; (Code Line - 5)
Now save your all the changes and you are done.Visit your blog to see this beautiful slide.

Follow this tutorial to show this gadget only on specific page or only in homepage.

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.
Good day....


112 Comments : Read Them Below Or Add One

  1. Hi, nice post! The widget is awesome! I didn't know you could do automatic slider for blogger :).. I have 2 problems if you could help:

    1) I edited the numbers a little and now the arrows are in different locations in different browsers. How do I fix that?

    My test blog: http://testingrevolution.blogspot.ca/

    2) Also, I have I have 3 tabbed widget that has jquery too and they cannot both work at the same time, do you know a fix?

    Thanks,
    David and

    ReplyDelete
  2. hello my friend, how are you?
    great post- but the slider dont seem to work.. can you please help?

    www.archeb.com

    10x

    ReplyDelete
  3. hello my friend, how are you?
    great post- but the slider dont seem to work.. can you please help?

    www.archeb.com

    10x

    ReplyDelete
  4. Replies
    1. the slider doesnt move.. it only shows one post. :(

      Delete
    2. I have checked my code and it is working... Please apply the codes carefully.If you can't fix this problem then please send me your template in .xml format using our contact form.

      Delete
    3. Hi I have a problem, the widget works but I noticed that my title doesn't show. i don't know what's wrong. :((

      Delete
  5. Dear Rahul,
    I'm trying to send you the xml file.. where can i send it.. i looked at your contact form and there is no way to attach a file..
    thanks for your help!
    yaniv

    ReplyDelete
    Replies
    1. Here is the link for contact form.

      http://www.helperblogger.com/p/contact-us_22.html

      thanks for your patience...

      Delete
  6. Hi, great widget!

    Installed it and works like a charm, only one question:
    How you can set the rolling speed and how can I adjust the dimensions to fit my blog (I would like to put it beneath the page title and make it as wide - possibly with more than one post at a time)?

    ReplyDelete
    Replies
    1. @Παιδί και Εργοθεραπεία - To adjust the speed you have to edit the script present in 2nd code line number 33. To adjust dimensions find these lines (4,6,10 and 15) in 1st CSS code

      Delete
    2. Is it also possible to make it wider so that it contains more than one slide at a time?

      Delete
  7. Hi Rahul, thanks so much. I also want to adjust the timing of the slider, but I don't understand your response 17 April. the 2nd code doesn't have 33 lines. I appreciate your help.

    ReplyDelete
  8. ok, figured it out. http://wordpress.org/support/topic/change-sliders-speed

    ReplyDelete
  9. Hi,

    i did all of steps and It's not working. If you can, please help me :)

    ReplyDelete
    Replies
    1. hey thank you so much for grabbing my attention on this widget,there was little error in the script of the slider and I have fixed it now.If you have already added this slider then kindly re-install the third code.If you not then follow above steps.

      Delete
  10. The slider is really good. but I found it's a bit truoblesome since the prev & next buttons were not on their correct positions. It would be more convenient if you can fix that problem.

    Thanx!
    SEMINAKEDGIRLS team

    ReplyDelete
  11. Ótimo slide vou adicionar ao meu blogger vai ser de grande utilidade!
    Obrigado!

    ReplyDelete
  12. Gostaria muito que você postasse esse design de comentário muito lindo ele :D

    ReplyDelete
  13. Hay Mr.Rahul....
    . i have a problem ....
    the size of my images on this "recent post with slider" so big. how to resize a images ???
    you can see that on my blog [ http://gapteka-z.blogspot.com/ ]
    please help me ... ^_^

    ReplyDelete
    Replies
    1. adjust the width and height of the slider,images will automatically resized.

      Delete
  14. Images are Ok, Titles are Ok, Arrow Buttons are Ok but my description snippet is showing errors like that "Normal 0 false false false EN-US X-NONE X-NONE MicrosoftInternetExplorer4"

    Please help me...

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. you can also see the demo at www.dwnld4u.blogspot.in

    ReplyDelete
  17. facebook and email subscriber is not working pls help

    http://ravikkumar569.blogspot.in/p/downloads.html

    i am using ur 2nd option code i,e HTML/Javascript widget.


    the following detials is used

    Your Facebook Fan Page Username-- ravikumar569
    Your Feedburner ID-- ravikkumar569@gmail.com

    Your Twitter Username-- manjeetkumar567

    ReplyDelete
  18. facebook and email subscriber is not working pls help

    http://ravikkumar569.blogspot.in/

    i am using ur 2nd option code i,e HTML/Javascript widget.


    the following detials is used

    Your Facebook Fan Page Username-- ravikumar569
    Your Feedburner ID-- ravikkumar569@gmail.com

    Your Twitter Username-- manjeetkumar567

    ReplyDelete
  19. Arrow of the slider has been dis positioned.Please Fix this ASAP!

    http://nepalnews-12.blogspot.com/

    ReplyDelete
  20. And How do you control the timing of each slide here ?????? Please specify

    ReplyDelete
  21. This comment has been removed by the author.

    ReplyDelete
  22. I would also like to take the controls out, both arrow images I do not want, how can I take them out, I've tried many things and nothing works

    ReplyDelete
  23. This comment has been removed by the author.

    ReplyDelete
  24. Hello, It's perfect one. but i got a little problem with it,
    When i open post page it show up above the post image or some words of the article and hide it, I just want this slideshow to appear only in the main page......??? Could you please, tell me how can i do it ?????

    Waiting you answer!!!

    ReplyDelete
  25. Thanks for the script. I'm also having a problem with the positioning of the arrows. They appear too high and too far to the left on all browsers. Any thoughts on what I might have done wrong or how to fix?

    Thanks,
    Dave

    ReplyDelete
  26. thank you so much..i love it..
    ragav... its my site.. www.viswaroobam.com..do a visit for fun

    ReplyDelete
  27. Hi, i am usgin this in my blog but i can´t center the slider, i have tried everything and still cand do it, is it possible to help me? if we could chat via msn would be great.

    Best Regards.

    ReplyDelete
  28. I am using your code but i am facing big prob , plz help me

    ReplyDelete
  29. not working for me at all.. perhaps because i'm using custom template. my blog is http://www.masheddownload.blogspot.com

    ReplyDelete
  30. By any chance do you know why the buttons are off centered?

    I have it here www.mateogodlike.com

    ReplyDelete
  31. Hi,

    I cannot find where it says "Page Layout > Add a Gadget > HTML/JavaScript. Can you please help??

    Thank you,

    Mark

    ReplyDelete
    Replies
    1. that`s my problem too!

      Delete
    2. this is it, follow this link, but first you have to change (your blogger ID here) in the link below.

      http://www.blogger.com/rearrange?blogID=(your blogger ID here)sectionId=crosscol&action=editWidget&widgetType=HTML&referrer=directory

      Delete
  32. Thanks so much!!

    I searched long and hard for a dynamic slider and I'm glad I finally found it!

    ReplyDelete
  33. Hello. Anyone knows how to remove the title and the description, leaving only pictures sliding? Thanks

    ReplyDelete
  34. no image available :(
    what's wrong with mine? :(

    ReplyDelete
  35. hi. how to make it larger? i tried but background pictures are still the same size. help :)

    ReplyDelete
  36. check our cool blog
    http://easy2earnquick.blogspot.in/

    ReplyDelete
  37. the blog http://techcorporate.blogspot.in/ has fantatsic content all about tech you can view it by the link provide and offcourse the blog is using most of the widgets and tricks from this site

    really this is very good
    you can view it at http://techcorporate.blogspot.in/

    ReplyDelete
  38. This is absolutely awesome! Thank you for sharing.

    ReplyDelete
  39. Is there a way to make the slides to stay longer until they go to the next one?

    ReplyDelete
  40. how to change the speed of slide?, thanx

    ReplyDelete
  41. speed: looking for this tag: continuous: true,
    replace this: continuous: true,
    controlsShow: false,
    speed: 4000,
    pause: 4000

    ReplyDelete
  42. why i don't see the next of the Pre Button on the slide?

    ReplyDelete
  43. Hi, how can I modify the plugin so I can use it in a template with another jquery plugin but of version 1.4.8.?

    ReplyDelete
  44. Hi,
    I tried to include this widget in my blog but nothing shows up (only "prev" and "next" buttons)
    error message javascript:void(0) when trying to activate "next" and "prev" buttons
    It seems not to find the recent posts...

    my blog is here :
    http://parentscherelles.blogspot.fr

    can you help ?

    ReplyDelete
  45. how to see video also but now picture only

    ReplyDelete
  46. You`ve made a good job :) works really fine. thx!

    http://www.hotnewsblog.net

    ReplyDelete
  47. when you post this onto your blogger the text font corresponds to your own blogs text style

    so every time i post this code onto my blog, the slider post titles come out black color, which is not visible

    how do i change the color of the text?

    changing the given code does not work.

    through trial and error i have come to release something in my blog html has to change, any idea ?

    ReplyDelete
  48. Thanks Rahul, The widget is working on my blog but I want to know how to use it for "announcements" or "events" instead of recent posts?

    ReplyDelete
  49. Again Rahul, I want to know why my sliders (arrows) are above the main slider (in the main menu). How do I bring them near the slider?
    This is my blog: ghanacampuses.blogspot.com or campuzfilla.com. Thanks and hope to hear from you!

    ReplyDelete
  50. You ROCKs Man
    If u Want To Read ArtiCLes

    Take a Look At My Blog

    www.officialanas.blogspot.com

    ReplyDelete

  51. for people who have problem with arrows and want to delete them just do this: find in the first HTML code the code:

    #nextBtn, #slider1next {
    left: 520px !important;

    and just delete it.

    ReplyDelete
  52. This comment has been removed by the author.

    ReplyDelete
  53. To change the speed:

    Look for this section:
    $(document).ready(function(){
    $("#slider").easySlider({
    auto: true,
    continuous: true
    });


    the auto and continous are variables. you can add the following 2:
    $("#slider").easySlider({
    auto: true,
    continuous: true,
    pause: 4000,
    speed: 800
    });

    pause 4000 means "Wait 4 seconds before switching post"
    speed 800 means "take .8 of a second to scroll in new image"

    ReplyDelete
  54. Hi
    this is really interesting i will try in my website
    www.umdeema.com

    ReplyDelete
  55. thanks a lot. permit me to share. bravo and nice share

    ReplyDelete
  56. Hey,

    I want to resize this to 930x300. How can i do that? Please answer me, i'm tired to change all the updaate on manual update.

    Thx

    ReplyDelete
  57. Really interesting going to try it.Thanks

    ReplyDelete
  58. Hi I am from Manager Review and this is just what we needed to make my posts more appealing to our audience.

    how can w=i increase the width of the slider to use it as a header?
    www.managereview.blogspot.com

    ReplyDelete
  59. Superb man

    http://thetrickslab.com

    ReplyDelete
  60. Thank you very much I was struggling with this tricks but now I have added this to my blog...whole credit goes to you...

    ReplyDelete
  61. Thanks worked fine on http://curioussoft.blogspot.com/

    ReplyDelete
  62. My feed is routed through feedburner ..... I believe that's why images are not showing. Can you please help me out?

    Another thing, the prev/next tabs are not showing on slides. when I changed position to relative their position changed but there is big gap under slider. Please help....how to remove it.

    my blog....

    http://muvicut.blogspot.com/

    ReplyDelete
  63. Good Content..Well Programmed..Great think about this program. Congrats for given this post here.

    Boom Barriers
    Boom Barriers
    Gate Barriers
    Gate Barriers

    ReplyDelete
  64. i am using the same on my blog http://zindagi125.blogspot.in/
    ....
    awesome programme
    well thanx rahul sir

    ReplyDelete
  65. Honey Club brings latest Pakistani Entertainment News,Political news of Pakistan, Sports News Of Pakistan, Hot celebrity Pictures , Scandals, Bollywood News, Pakistani female politicians and Breaking News From Pakistan, Entertainment News of Pakistan.
    Entertainment News of Pakistan

    ReplyDelete
  66. hello, pls help me i put the third code on in html section of a static page of my blogspot url and it worked but unfortunately when i tried it on my custom domain its not showing anything please help me fix this, i will be very garteful here is the page http://www.trendynaija.com/p/home-page.html

    ReplyDelete

  67. Good blog and the contents are really nice, thanks for sharing here with us.

    parking management
    parking guidance
    parking counting

    ReplyDelete
  68. This is a really excellent read for me. Must agree that you are one of the best bloggers I ever saw. Thanks for posting this informative article.
    CD Manufacturing

    ReplyDelete
  69. I tried a lot of scripts with no results. but these here really works. Now what I want to do is to have slider a little bit wider. Could you tell me what is the number for that or what should I change to make it wider.
    Thanks

    ReplyDelete
  70. This comment has been removed by the author.

    ReplyDelete
  71. This comment has been removed by the author.

    ReplyDelete
  72. Genuinely good thanks, I do believe your trusty audience would probably want a great deal more blog posts of this nature maintain the good hard work.
    http://www.promodisc.org/glossary/cd-replication

    ReplyDelete
  73. why my blogs it show no image available why its show like an image and doesn't automatic scrolll

    ReplyDelete
  74. At my blog it doent show anything. All codes are correct =/ please help Sanny makeupcouture.de

    ReplyDelete
  75. This comment has been removed by the author.

    ReplyDelete
  76. Hi Rahul, I have a gaming website called www.irobotgaming.com but I wanted to know if I can automate my existing Slide slide to reflect my latest Posts?
    Can you please let me know, I would really really appreciate it.
    Thank you
    craigcreationz@gmail.com

    ReplyDelete
  77. Thanks Man , I am gonna use it in my website
    Direct Download Stuffs

    ReplyDelete
  78. It does not work, only one slide is shown, I've pasted the exact code and it does not work. The buttons are not shown and only the last post is shown but it's a static one

    ReplyDelete
  79. Yes your are wright and thanks for post a good topic . your post is

    top most in related post of Automatic Recent Posts Slider With j Query For Blogger.

    ReplyDelete
  80. Yes your are wright and thanks for post a good topic . your post is

    top most in related post of How To Add This Slider To Blogger?

    ReplyDelete
  81. saya tidak bisa melihat demonya :(

    ReplyDelete
  82. my slider is not working, help me please

    http://www.hotteg.com

    ReplyDelete
  83. Valuable information and excellent design you got here! I would like to thank you for sharing your thoughts and time into the stuff you post!! Thumbs upNational news in pakistan

    ReplyDelete
  84. can i use this method on my php script?

    ReplyDelete
  85. my site URL is www.xpennyauctions.com
    i want to add homepage auto post slideshow please help

    ReplyDelete
  86. hey, i'm just trying this code. but i've got this problem --> Invalid widget: "HTML4
    Error 400", when adding the gadget, save... and then appear this problem. thank you

    ReplyDelete
  87. only show one post, no previous button and next button, need help, i already follow ur instruction, anything wrong?? please cek my blog http://whitenoteblock.blogspot.com

    ReplyDelete
  88. i like your post keep sharing your information to us
    Eastern Mountain Sports Coupon Code

    ReplyDelete
  89. Hi, you could help me? It doesn't appear in my blog

    ReplyDelete
  90. it just put a blank white space for slides but slides not appear, help pls

    ReplyDelete
  91. This comment has been removed by the author.

    ReplyDelete
  92. Get Latest News based Technology News on http://post.jagran.com.

    ReplyDelete
  93. Wholesale Sexy Lingerie,High Quality!Low Price! Wholesale Leggings,Plus Size Corsets,Wholesale Halloween Costumes From China Suppliers LingeriePark.Wholesale Only,No Retail!Lingerie China Suppliers http://www.lingeriepark.com/

    LingeriePark http://www.lingeriepark.com/

    Wholesale Sexy Lingerie http://www.lingeriepark.com/

    Low Price Lingerie http://www.lingeriepark.com/

    ReplyDelete

If you want to be informed about any replies then click on "Subscribe by email" (present below of comment box).PLEASE DO NOT SPAM