Automated Recent Posts Slider for Blogger

Dhiraj Barnwal Sunday, 21 July 2013 70 comments
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.

Labels:
Google+ Pinterest

70 Comments to Automated Recent Posts Slider for Blogger Post Yours! Read Comment Policy ▼

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

plz tell me

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

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

-SSD

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

Only working in Homepage please help

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

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

how to change the size of this widget?

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

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

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?

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;

very nice tips.
thanks sir........

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

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!

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

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

Thank you very much, I love your tutorials.

Hello, how can I enlarge the size of the slider?

can we use random posts instead of Recent Posts?

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

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.

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

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

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

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

how can i change the witdh, please?

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?

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

Thanks.

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.

Muchas gracias, funciona de maravilla. Saludos.

(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.

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

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

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.

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

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

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

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

Nice information... thanks for share this...

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

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

Really Nice!! thanks for your information.

not work bro .. post show prob

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;
}

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

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

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

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

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

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

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

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

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)

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

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

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