Automated Recent Posts Slider for Blogger

The number of bloggers worldwide has increased tremendously. Many of us would have more than 1 blog. If yes this widget may help you a lot to share the traffic in both the blogs. Even if you don't have more than one blog you may add this widget to your very own blog. This will help your blog have less bounce rate and more pageviews.

Automated Recent Posts Slider is a widget for blogger which will show the recent posts of your desired blog with nice and awesome interface. This widget updates automatically and you do not have to edit the widget and add images, titles and description again and again. You just have to add the URL of the blog and your setup will be complete.
A live demo of this widget can be seen below.



Once you have seen the demo, to add this widget to your blog follow the steps below.

Adding the Widgets code in Blog Layout


In order to add this widget's code go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the given code in the box opened.

<link rel="stylesheet" type="text/css" href="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css"/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/blogger-feed-rotator.min.js"></script>
<script type="text/javascript">
makeSlider({
    url: "http://YOURURL.blogspot.com" // Add your blog URL
});
</script>

After adding the code change the URL in Bold Blue with your own desired URL and save the widget. Finally save the template which will make the widget live.

You are done now. Now you and your visitors can see this awesome Automated Recent Posts Slider in your blogger blog.

73 comments:

  1. How to add reply option on blogger comments ....

    plz tell me

    ReplyDelete
    Replies
    1. If you have Blogger’s commenting feature enabled, “Blog Feed” set to “Full”, and are using “Embedded” comments, then you’re ready to start a discussion with your readers. To check, or change your feed settings, select: “Settings > Other >, and then “Full” from the “Allow Blog Feed” dropdown:

      http://4.bp.blogspot.com/-PFiCX_CJbkE/Tw4JGtcy9SI/AAAAAAAAAGE/Eed-wdeq0UY/s640/blog%252520feed.jpg

      To check your current form setting, select: “Settings > Posts and Comments, and select “Embedded” from the “Comment Location” dropdown:

      http://2.bp.blogspot.com/--XW9cYZs3xg/Tw4JGJ0rWLI/AAAAAAAAAF0/B0Y-bARLIhs/s640/embedded.jpg

      Delete
  2. this is cool man

    ReplyDelete
  3. Wow.. This is amazing! How do I change the size of the window to fit into the side panel?

    -SSD

    ReplyDelete
  4. thanks alot it helps me...i m finding such post from many decade and finally find it ...i love your siter really :-)

    ReplyDelete
  5. Only working in Homepage please help

    ReplyDelete
  6. Awesome Slider . I inserted it on my blog http://bloggingwares.blogspot.com

    ReplyDelete
  7. please help how do I change the size of the window to fit into the side panel because I open this file http://blogger-json-experiment.googlecode.com/svn/resources/blogger-feed-rotator-plugin/default-style.min.css and change {width:250px;height:340px but don't work

    ReplyDelete
  8. how to change the size of this widget?

    ReplyDelete
    Replies
    1. Hi, you ll have to inspect element and then see the corresponding elements in your browser. Find the matching css that needs to be modified and place it in your template's css. Then modify the values you desire and add: !important rigth after the modified css. Let's say you need to change a width: then you use this css: width:650px !important;

      Delete
  9. 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.

    or else please tell me how to resize it?

    thanks

    ReplyDelete
  10. Please tell me how to change the size of this widget :(

    ReplyDelete
  11. Hi! how can i use the widget for specific labels? the script does not include the feed but only the url. Can we modify it for specific tags?

    ReplyDelete
  12. very nice tips.
    thanks sir........

    ReplyDelete
  13. How I can change the size for exemple width='600' ?? help

    ReplyDelete
  14. hey! a little help here.The slide rotator is appearing two times, how i can fix it?
    visit: rustedbyte.blogspot.com
    On the homepage the slide rotator is appering two times.
    And thanks for this!

    ReplyDelete
  15. Awesome Slider . I inserted it on my blog http://www.change24h.net.
    Thanks Author . All the best <3

    ReplyDelete
  16. That was exactly what I was looking for. Thank you.

    ReplyDelete
  17. Thank you very much, I love your tutorials.

    ReplyDelete
  18. Hello, how can I enlarge the size of the slider?

    ReplyDelete
  19. can we use random posts instead of Recent Posts?

    ReplyDelete
  20. Its not working any more! I guess blogger blocked it! it worked for few days now I cant see the photos. Help please!

    ReplyDelete
    Replies
    1. This could be possible because you may be dragging the images/using images hosted on non-blogger servers. Blogger crawls only those images which are hosted on its server with the exception of a few selected.

      Delete
  21. Woooww its so amazing, u make my blog like professional blogger :D ... how to change the size ? thanks :)

    ReplyDelete
  22. Is there anyway to change it from recent posts to instead showing a blogs popular posts?

    ReplyDelete
  23. I love the look of the letter and its effect...!, thank's for share

    ReplyDelete
  24. How to change width size? I want it to be 100% to fit in my template, could it be possible?
    -thanks

    ReplyDelete
  25. how can i change the witdh, please?

    ReplyDelete
  26. Hi! how can i use the widget for specific labels? the script does not include the feed but only the url. Can we modify it for specific tags?

    ReplyDelete
  27. why nobody answer the questions? if the comment is approved it means its been already read, so why no answer? :(

    Thanks.

    ReplyDelete
    Replies
    1. I am alive.. :P Actually the problem is I am in grade 11 now and I have absolutely very less time to manage but I assure I will keep this blog alive.. ;) My hand has been fractured, so I am delaying a post which is almost 90% complete. Can't type much.

      Delete
  28. Muchas gracias, funciona de maravilla. Saludos.

    ReplyDelete
  29. (first, sorry my English) I tried it, but the slide rotator was two times on the Blog. I tried it a second time. The same thing. Every time I delet the Widget, there are still empty widgets in the layout modus. I can't delet them.

    ReplyDelete
  30. very pretty and usefull...nice work , as always...small width, and beautifull design...the only bad is that it shows ONLY 5 posts !!! Never mind , however, it' s perfect...

    ReplyDelete
  31. Obrigado, postagem muito boa, bem proveitosa.
    lojahost.net

    ReplyDelete
  32. I tried them to my blogs http://igngamesdownloads.blogspot.com and http://bigbadplanet.blogspot.com and they worked. I just cant find a way to change the width and height. Thanks.

    ReplyDelete
  33. Really nice!, can you explain me, step-by-step, how i can change the size?

    ReplyDelete
  34. This was really helpful!
    It would have been nice if there was more customization though.

    ReplyDelete
  35. Hi, I tried this widget but it stuck to the first slide it never changes?

    ReplyDelete
  36. This is great template blog.....nice information and useful.

    ReplyDelete
  37. Nice information... thanks for share this...

    ReplyDelete
  38. Hi, I was using this slider for a couple of months and now suddenly started to not show the images of my latests posts, all images are uploaded via Blogger. Any idea what can I do to fix this?

    Thanks!
    Maira

    ReplyDelete
  39. Realy its working but there is no link to that post.....

    ReplyDelete
  40. Really Nice!! thanks for your information.

    ReplyDelete
  41. not work bro .. post show prob

    ReplyDelete
  42. If any of you are looking to put the the image and the text side by side in the slider and make it 100% of a div, just paste the CSS code below into your web sites CSS (modify accordingly and important any change you make)

    .slider-rotator {
    width: 100%!important;
    height: 250px!important;
    border: 0!important;
    background-color:#ccc!important;
    padding: 0!important;
    font: normal normal 11px/1.4 Tahoma,Verdana,Arial,Sans-Serif;
    color: #333;
    margin: 0 auto;
    position: relative;
    overflow: hidden;
    text-align: left;
    float:left;
    }

    .slider-rotator .slider-item {
    position: absolute;
    padding:0px!important;
    background-color: #ccc!important;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    display: none;
    width:100%!important;
    }

    .slider-rotator-nav {
    text-align: center;
    float: left!important;
    width: 100%!important;
    margin-top: 6px!important;
    height: 33px!important;
    }

    .slider-rotator .slider-item .detail-wrapper {width:48%!important; float:left!important;}

    .slider-rotator .slider-item .image-wrapper {width:48%!important; float:right!important;}

    .slider-rotator h4 {
    font-weight: 300!important;
    margin:0!important;
    font-family: "Antipasto"!important;
    text-transform: uppercase!important;
    font-size: 21px!important;
    color: #001728!important;
    }

    .slider-rotator-nav a {
    display: inline;
    color: white;
    padding: 4px 8px;
    line-height: 2.6em;
    margin: 0 2px;
    text-decoration: none;
    background-color: #001728!important;
    font-family: "Antipasto"!important;
    }

    .slider-rotator-nav a.current {
    background-color: #16476c!important;
    }

    .slider-rotator h4 a:hover {
    color: #16476c!important;
    text-decoration: underline!important;
    }

    .slider-rotator-nav a:hover {
    background-color: #16476c!important;
    }

    ReplyDelete
  43. How to chane size and remove controls? I want it to use on my header, Please help.

    ReplyDelete
  44. hello,
    I want a email before download plugin for blogger...
    plz help me ....

    ReplyDelete
  45. Thanks. It works very well....!!! Have a look: http://baticblog.blogspot.com/

    ReplyDelete
  46. Very nice post your coding is good working on my blog site Best Shopping Sites!

    ReplyDelete
  47. This is indeed a great recent post slider. Thanks for sharing. :) - www.mobileleloo.com

    ReplyDelete
  48. Really working in my site. thanks for share.
    I added my site
    http://hdfullsmovie.blogspot.com

    ReplyDelete
  49. Its Great. Thank you so much ^-^ Here i already added to my blog http://hamnoi23.blogspot.com/

    ReplyDelete
  50. It work on me. However after you open the page you still need to refresh it so that it will work. Please help me on this so that my viewers will no longer refresh and automatically loads and shows up all latest post.
    this is the page www.spotbisaya.tk

    ReplyDelete
  51. Bonjour,
    j'ai installé le gadget sur mon blog, il y a quelques mois maintenant, mais je viens de m'apercevoir qu'il en marche plus :(
    Est-il toujours valable ?
    D'avance merci (sorry I'dont speak english)

    ReplyDelete
  52. Hi ,
    Please help me. This is not working for my blog-https://sagarseo.blogspot.in/

    ReplyDelete
  53. It work on me. Automated Recent Posts Slider for Blogger thanks for updating here

    ReplyDelete
  54. Can i see, How is this Looking?
    I mean Demo

    ReplyDelete
  55. Sir i did exaCTly as you said but not showing help sir

    ReplyDelete
  56. Thanks for sharing a wonderful article.

    ReplyDelete