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=""/>
<div id="slider-rotator" class="slider-rotator loading"></div>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
    url: "" // Add your blog URL

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.


27 July 2013 at 19:40

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

plz tell me

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:

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

Azir Jusufi Author
1 August 2013 at 17:40

this is cool man

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?


rebwar Author
23 September 2013 at 04:01

do not work

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 :-)

Sugam Limbu Author
6 October 2013 at 20:08

Only working in Homepage please help

15 October 2013 at 01:12

Awesome Slider . I inserted it on my blog

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 and change {width:250px;height:340px but don't work

vijay Sharma Author
17 November 2013 at 21:31

thanks for help me...

26 November 2013 at 01:39

how to change the size of this widget?

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 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 please help me.

or else please tell me how to resize it?


Rina Ignacio Author
2 December 2013 at 06:58

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

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?

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;

Sonu Author
10 December 2013 at 03:31

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

15 December 2013 at 07:56

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

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?
On the homepage the slide rotator is appering two times.
And thanks for this!

31 December 2013 at 21:15

Awesome Slider . I inserted it on my blog
Thanks Author . All the best <3

12 January 2014 at 13:38

Thanks Man! :)

8 February 2014 at 11:52

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

12 February 2014 at 16:26

Thank you very much, I love your tutorials.

Realone Author
21 February 2014 at 07:41

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

daniyal Author
21 March 2014 at 15:09

can we use random posts instead of Recent Posts?

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!

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.


good share..., thans for information :)

23 April 2014 at 10:06

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

23 April 2014 at 14:04

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

Aldino Sya Author
11 May 2014 at 06:21

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

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?

Anonymous Author
23 May 2014 at 11:44

how can i change the witdh, please?

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?

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? :(


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.

Kazbam Mabzak Author
30 June 2014 at 07:33

Muchas gracias, funciona de maravilla. Saludos.

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.

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

6 August 2014 at 07:32

Obrigado, postagem muito boa, bem proveitosa.

rubrub Author
7 September 2014 at 09:56

I tried them to my blogs and and they worked. I just cant find a way to change the width and height. Thanks.

Stef Pag Author
8 September 2014 at 01:56

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

Lucy Cakedog Author
21 September 2014 at 10:55

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

24 September 2014 at 05:36

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

Tips & Cara Author
8 October 2014 at 07:55

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

Cantik Sehat Author
9 October 2014 at 18:15

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

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?


14 November 2014 at 12:41

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

21 December 2014 at 11:37

Really Nice!! thanks for your information.

24 December 2014 at 09:39

not work bro .. post show prob

stalin wesley Author
23 February 2015 at 00:48


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

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

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

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.

29 April 2015 at 10:46

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

7 May 2015 at 17:50

Great work! Thank you.

BATIC Media Author
18 May 2015 at 01:30

Thanks. It works very well....!!! Have a look:

Yogesh Gulati Author
15 July 2015 at 12:16

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

Ajay Ghanpur Author
30 July 2015 at 01:46

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

R Islam Author
3 September 2015 at 03:36

Really working in my site. thanks for share.
I added my site

adminpage Author
2 October 2015 at 00:39

Its Great. Thank you so much ^-^ Here i already added to my blog

26 December 2015 at 00:25

how to make container fluid?

Anonymous Author
29 February 2016 at 02:46


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

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

it cant be used anymore

4 June 2016 at 12:47

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)


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 |