Automated Recent Posts Slider for Blogger

Posted On // 64 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.

64 comments

27 July 2013 at 19:40

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

plz tell me

Reply
27 July 2013 at 20:01

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

Reply
Azir Jusufi Author
1 August 2013 at 17:40

this is cool man

Reply
Anonymous Author
23 September 2013 at 01:16

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

-SSD

Reply
rebwar Author
23 September 2013 at 04:01

do not work

Reply
25 September 2013 at 10:29

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

Reply
Sugam Limbu Author
6 October 2013 at 20:08

Only working in Homepage please help

Reply
15 October 2013 at 01:12

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

Reply
Stefan Author
10 November 2013 at 10:43

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

Reply
vijay Sharma Author
17 November 2013 at 21:31

thanks for help me...

Reply
26 November 2013 at 01:39

how to change the size of this widget?

Reply
1 December 2013 at 12:53

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

Reply
Rina Ignacio Author
2 December 2013 at 06:58

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

Reply
nea-news Author
5 December 2013 at 02:34

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?

Reply
nea-news Author
5 December 2013 at 02:38

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;

Reply
Sonu Author
10 December 2013 at 03:31

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

Reply
15 December 2013 at 07:56

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

Reply
M.Mustaghees Author
27 December 2013 at 21:54

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!

Reply
31 December 2013 at 21:15

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

Reply
12 January 2014 at 13:38

Thanks Man! :)

Reply
8 February 2014 at 11:52

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

Reply
12 February 2014 at 16:26

Thank you very much, I love your tutorials.

Reply
Realone Author
21 February 2014 at 07:41

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

Reply
daniyal Author
21 March 2014 at 15:09

can we use random posts instead of Recent Posts?

Reply
Toufga H Author
30 March 2014 at 09:46

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

Reply
31 March 2014 at 00:45

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.

Reply

good share..., thans for information :)

Reply
23 April 2014 at 10:06

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

Reply
23 April 2014 at 14:04

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

Reply
Aldino Sya Author
11 May 2014 at 06:21

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

Reply
Anonymous Author
16 May 2014 at 03:09

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

Reply
Anonymous Author
23 May 2014 at 11:44

how can i change the witdh, please?

Reply
Anonymous Author
13 June 2014 at 11:04

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?

Reply
Anonymous Author
20 June 2014 at 10:17

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

Thanks.

Reply
26 June 2014 at 07:55

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.

Reply
Kazbam Mabzak Author
30 June 2014 at 07:33

Muchas gracias, funciona de maravilla. Saludos.

Reply
24 July 2014 at 02:33

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

Reply
25 July 2014 at 03:09

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

Reply
6 August 2014 at 07:32

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

Reply
rubrub Author
7 September 2014 at 09:56

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.

Reply
Stef Pag Author
8 September 2014 at 01:56

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

Reply
Lucy Cakedog Author
21 September 2014 at 10:55

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

Reply
24 September 2014 at 05:36

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

Reply
Tips & Cara Author
8 October 2014 at 07:55

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

Reply
Cantik Sehat Author
9 October 2014 at 18:15

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

Reply
Anonymous Author
13 November 2014 at 08:30

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

Reply
14 November 2014 at 12:41

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

Reply
21 December 2014 at 11:37

Really Nice!! thanks for your information.

Reply
24 December 2014 at 09:39

not work bro .. post show prob

Reply
stalin wesley Author
23 February 2015 at 00:48

nice

Reply
Anonymous Author
31 March 2015 at 04:57

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

Reply
Rahul Author
3 April 2015 at 08:53

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

Reply
29 April 2015 at 10:46

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

Reply
7 May 2015 at 17:50

Great work! Thank you.

Reply
BATIC Media Author
18 May 2015 at 01:30

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

Reply
Yogesh Gulati Author
15 July 2015 at 12:16

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

Reply
Ajay Ghanpur Author
30 July 2015 at 01:46

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

Reply
R Islam Author
3 September 2015 at 03:36

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

Reply
adminpage Author
2 October 2015 at 00:39

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

Reply
26 December 2015 at 00:25

how to make container fluid?

Reply
Anonymous Author
29 February 2016 at 02:46

Thanks!

Reply
spotbisaya Author
3 April 2016 at 13:13

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

Reply
Jit API-SM Author
12 May 2016 at 02:33

it cant be used anymore

Reply
4 June 2016 at 12:47

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)

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Automated Recent Posts Slider for Blogger |