Fully Automated Slider for Sidebar of Blogger

Posted On // 94 comments

So today I am posting a widget which I personally like too much. This widget is somewhat like the previous Featured Post widget I have posted but totally different in functioning. You can add this slider to your Sidebar. You just have to do 1 time customization unlike the previous widget. It is fully automated you just have to enter your blogs URL and the slider will keep updating the posts.

This widget is somewhat different. We normally use Sidebar for adding widgets like Popular Posts, Labels, Like box etc. but this time we would be adding a slider to the sidebar. This widget contains number of effects including Hover effect, Transition effect etc. You can change the number of slides to be shown. You can change the posts displayed for a specific label i.e. if you want to show only of a specific label you can by changing the settings.

To see the live demo of this widget click the button below and look at the right sidebar.

Live Demo

Adding the HTML/CSS/JS

Go to Blog Title → Layout → Add Widget → HTML/JavaScript. Add the below given code and Save it.

<style scoped="" type="text/css">
Made by AllBloggerTricks.com with lot of hardwork please keep the comment intact
ul.abt-sidebar-slider *{-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box}
ul.abt-sidebar-slider{font:normal normal 11px Verdana,Geneva,sans-serif}
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{margin:0;padding:0;list-style:none;position:relative}
ul.abt-sidebar-slider li{height:24.5%;position:absolute;padding:0;width:49.5%;float:left;overflow:hidden;display:none}
ul.abt-sidebar-slider li:nth-child(1),ul.abt-sidebar-slider li:nth-child(2),ul.abt-sidebar-slider li:nth-child(3),ul.abt-sidebar-slider li:nth-child(4){display:block}
ul.abt-sidebar-slider img{border:0;width:100%;height:100%}
ul.abt-sidebar-slider li:nth-child(1){width:100%;height:49.5%;margin:0 0 2px;left:0;top:0}
ul.abt-sidebar-slider li:nth-child(2){left:0;top:50%}
ul.abt-sidebar-slider li:nth-child(3){left:50.5%;top:50%}
ul.abt-sidebar-slider li:nth-child(4){width:100%;left:0;top:75%}
ul.abt-sidebar-slider  .overlayx,ul.abt-sidebar-slider li{-webkit-transition:all .4s ease-in-out;-moz-transition:all .4s ease-in-out;-o-transition:all .4s ease-in-out;-ms-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
ul.abt-sidebar-slider .overlayx{width:100%;height:100%;position:absolute;z-index:2;left:0;top:0;background-image:url(http://1.bp.blogspot.com/-FtnGJHMcWH8/UIV3IE-aaJI/AAAAAAAAGHs/WvLypnWxg5A/s1600/linebg-fade.png);background-position:50% 50%;background-repeat:repeat-x}
ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img{border:4px solid #2E8DCE;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px}
ul.abt-sidebar-slider li:nth-child(1) .overlayx{background-position:50% 25%}
ul.abt-sidebar-slider .overlayx:hover{-ms-filter:"progid:DXImageTransform.Microsoft. Alpha(Opacity=10)";filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1}
ul.abt-sidebar-slider h4{position:absolute;bottom:30px;z-index:2;color:white;margin:0;width:100%;padding:0 10px;line-height:1.5em;font-family:Georgia,Times,"Times New Roman";font-weight:normal}
ul.abt-sidebar-slider li:nth-child(1) h4,ul.abt-sidebar-slider li:nth-child(4) h4{font-size:150%}
ul.abt-sidebar-slider .label_text{position:absolute;bottom:10px;left:10px;z-index:2;color:white;font-size:90%}
ul.abt-sidebar-slider li:nth-child(2) .autname,ul.abt-sidebar-slider li:nth-child(3) .autname{display:none}
.buttons{margin:5px 0 0}
.buttons a{display:inline-block;text-indent:-9999px;width:15px;height:25px;position:relative}
.buttons a::before{content:"";width:0;height:0;border-width:8px 7px;border-style:solid;border-color:transparent #535353 transparent transparent;position:absolute;top:50%;margin-top:-8px;margin-left:-10px;left:50%}
.buttons a.nextx::before{border-color:transparent transparent transparent #535353;margin-left:-3px}
<div id="featuredpostside"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js" type="text/javascript"></script>
<script src="http://files.allbloggertricks.com/Scripts/abt-sidebar-slider.js" type="text/javascript"></script>
<script type='text/javascript'>

Now save the template so that changes can take place.


These are the 1 time settings you may apply.

blogURL      = Add your blog URL here
MaxPost       = The total no. of posts in the slider
Interval         = Time taken to change the slides position in milliseconds
autoplay        = Write true or false in you want / don't want the slides to change automatically.
tagname        = If you want to display articles by tag / label, such as the tag widget, it will be written as tagname: "widget"

Once you are done with the settings edit the code and Save the template again. Thats it, a cool sidebar slider can now be seen in your blogger blog.


24 April 2013 at 17:45

The slider for some reason doesn't always show an image for the post, is there anyway to change this? Also, i'd like to change the border colour and text font. Please help :-)


24 April 2013 at 19:02

@Tiffany The problem is that the widget only crawl images which are uploaded i.e. images which have .blogspot in the domain. Images from tinypic, photobucket etc. can't be crawled by this widget.
For changing the color of the border search for "border: 4px solid #2E8DCE;" and Replace #2E8DCE with your desired color.

azizaqa ahmed Author
25 April 2013 at 16:28


Brandon Oh Author
8 May 2013 at 03:35

Great widget. Is it possible to remove the 4th box at the bottom? thanks.

8 May 2013 at 13:27

@Brandoh As you can see the boxes HTML is added in the JS file itself so you have to edit the JS file in order to remove the bottom box. In short you can't if you can not host your own JS file somewhere else.

Kobi Klaf Author
2 June 2013 at 21:11

this slider makes the header slider of the blog stop working. any idea why and if this can be fixed?

2 June 2013 at 21:54

@Kobi Can I get the URL of your blog please.

16 June 2013 at 01:20

good word demo here

19 June 2013 at 12:34

this is amazing . thank you so much for taking the time to develop and share

Anonymous Author
20 June 2013 at 05:30

This is not fully you lier..

20 June 2013 at 13:23

Automatic is reffered in terms of working. Well in other sliders you have to manually add images, links and update them timely but here once you have put your URL it will work automatically.

24 June 2013 at 23:58

This is really helpful , but i have a bit problem .. How to change the font style and size ?

25 June 2013 at 14:41

Hi Xiao search for [pre] ul.abt-sidebar-slider h4[pre] and see the css properties inside the bracket and edit them.

Naveen Kumar Author
28 June 2013 at 17:51

Every thing is working good but its not able to show,images of recent post ,,help me

28 June 2013 at 17:54

@Naveen As far as I think the problem may be in the image server i.e. where the image is hosted. Blogger crawl images from some sites only like for example 1.bp.blogspot.com etc. The best way to overcome this problem is to "upload" images rather than copying and pasting them.

AY PC Author
1 July 2013 at 20:42

ႊ့ႊႊThank! good Post.

Geo Nikola Author
3 July 2013 at 03:48

Is there anyway to make this slider shows popular post? thanks...

3 July 2013 at 17:10

Well as of now No. We will work on it. Thanks for suggesting though.

Geo Nikola Author
4 July 2013 at 03:06

Hope see it soon.keep up the good job,many thanks,greetings from Greece-Athens !

Jatin Author
9 July 2013 at 09:54

Hi Dhiraj, I want to make the slider on my blog in such a way that it works on the basis of labels. Same as yours but I want to use the current slider on my blog http://thefootballworld2013.blogspot.in/. Please let me know how to do it, you can also add mail to me at jatin2312@gmail.com. Thanks

9 July 2013 at 14:17

To show posts from specific label. In the blogURL field add the Label link for example - http://www.allbloggertricks.com/search/label/CSS

nazhika Author
15 July 2013 at 13:53


15 July 2013 at 23:37

Woaw!!!!! This is great.. I love this widget so much. Thank you very much for the shear, I really love that!! But Pls, how can I make it to show a particular Label or Categories

16 July 2013 at 01:11

I dont know to make it display the recent post from a special category :/ Can you please help me ? My blog is on blogger. Thank you in advance, its a wonderful plugin!

16 July 2013 at 19:10

To show posts from specific label/category. In the blogURL field add the Label link for example - http://www.allbloggertricks.com/search/label/CSS

16 July 2013 at 19:11

To show posts from specific label/category. In the blogURL field add the Label link for example - http://www.allbloggertricks.com/search/label/CSS

22 July 2013 at 20:10

Any chance to make it look like this: http://www.engadget.com/2013/07/09/att-july-16th-whats-next/
Btw, I know this isn't your original work and has been lifted from one of ivythemes.com's themes :P
Still, nice to see it in a sidebar

22 July 2013 at 20:41

As of now No. But I will surely look after this.

24 July 2013 at 18:22

Hi Gaurav I have made the widget you want get it at

Geo Nikola Author
27 July 2013 at 03:49

i dont want the author name been seen in public in this widget. is there anyway my friend?

27 July 2013 at 05:03

I have this widget installed in my website.
If I want to change the description font of the slider from Times Roman to Arial then how will I do it.
Acutually, I use Arial font for my blog so I want Arial font on my description of the slider post when it changes.
Please help me with this asap.

27 July 2013 at 18:08

To remove authors name add the below given code just above </style> of the above code

.autname {
display: none !important;

27 July 2013 at 18:11

To change font to Arial add the below given code just above </style> of the above code given in the post

ul.abt-sidebar-slider h4 {
font-family: Arial !important;

Vedant Swain Author
27 July 2013 at 19:11

Dhiraj I can't get the photos on the tiles. Please tell me how to fix that

28 July 2013 at 08:24

Its happening because you do not upload the images. Blogger crawl images from their own hosted servers and some other selected servers. To fix this you may download and "upload" the image in the posts.

28 July 2013 at 13:26


Thanks a lot for solving my problem with the Times Roman font. I have now changed with the Arial font.

But now I want to change Label color in solid black color so that the Text on the Slider label will be visible. I don't want the slider label color with light black shade which originally appears. I want to change the Label color into solid black so that my Label Text which is in white color will become visible.

I hope you got my point. Please help me with this asap.

28 July 2013 at 15:37

For that add this code too.
ul.abt-sidebar-slider .label_text {
color: #000 !important;

29 July 2013 at 02:06

Hi where precisely I need to add this code?

29 July 2013 at 14:48

add the code just above of the above code given in the post

viraj kale Author
7 August 2013 at 12:52


16 August 2013 at 20:11

this is superb. thank you for your generosity.

Ufuk Doğan Author
21 August 2013 at 18:37

Teşekkürler çok güzel bir eklenti bloğumda güzel duracaktır ^^

Prashanth Author
8 September 2013 at 22:41

Thanks! my blog looks great:-)

Hisoka Author
17 September 2013 at 19:11

thanks for this great slider it works for me but i want to put 2 or 3 sliders in the home page it works only for one can you help me ? thanks

21 September 2013 at 21:25

when i put this widget to my blog, the top slide show stop to slide, can i help me for this problem?

nanang Author
24 September 2013 at 10:21

great widget, thanks for sharing

Poky S Author
20 October 2013 at 23:25

Thank you , it works for my blog

Direct Download Stuffs

Poky S Author
21 October 2013 at 08:09

Hi , I have installed the widget in my blog, but the header slider stopped working, but i have uploaded all the images in my blog. I did not copy them . What should I do
Here is my blog - Direct Download Stuffs

Rahul Jaykar Author
27 October 2013 at 21:41

Thank You Very much..Do you know css? I just want to change something in my menu..

Amy Author
31 October 2013 at 18:54

How do I change the border of the tiles to black? Thanks.

5 November 2013 at 06:55

salu j ai un blog et j ai intégré un slider ! qui se met derière mes articles dans l'accueil du blog ! et qaund je suis sur l un des article le slider s afiche correctement !! voila mn blog http://anime4nakama.blogspot.com/ , Stp porte moi coup de main :)

MicroEdges Author
25 November 2013 at 19:54

Thanks alot for sharing this helpful post. sidebar slider attract your blog and gives an eye catching look to your page. Your just give a great information.

28 November 2013 at 19:35

Sir, Hats off for this awesome post.
I have tried so many ideas to make my blog popular but no one of these work.
Can you help me please.
Visit my blog and please tell me what is wrong..
BLOG : www.10magictricks.blogspot.com

Jithin Author
12 December 2013 at 12:27

Nice Widget. I want to show post from multiple labels. Is there a way to do it ?

SEO Tips Author
29 December 2013 at 21:42

thanks for share color code. i use this color code in my blog.

30 December 2013 at 08:11

Great..Thanks a lot..www.madhepuratimes.com

Anonymous Author
31 December 2013 at 09:14

why you always insert "abt" on CSS ?

that doesn't make'in your blog 'more' popular anyway ( even if your blog is already popular ). why won't you just try it like this ul.sidebar-slider .overlayx,ul.sidebar-slider img looks simple, rather than this ul.abt-sidebar-slider .overlayx,ul.abt-sidebar-slider img *when im try'in to edit some of this code, it make my head blow up*

im just try'in to make ur blog better, I really like your blog, although this is not a big problem anyway, but this "abt" things *urgh*

31 December 2013 at 10:19

Haha ! I am really sorry if that caused you inconvenience. My main motive for adding abt is to avoid other noob copy cats to replicate my codes and show others that the following thing/widget was coded by them and it has been very helpful for me too. There are more than 50 blogs which have copied my posts word to word (Yah I don't impose DMCA on them because I am tooooooo lazy :P ) The codes help other people who browser the copiers blog to know that it was coded by abt.


Anonymous Author
31 December 2013 at 11:50

so, it mean this widget made by you, am i right ?

faddas Author
26 January 2014 at 21:34

How do i change the border's color? btw. i love this widget.

18 February 2014 at 12:07

Thanks for this awesome auto slider. I use this for my blog and it suits very well in my current theme. Keep up the good work!


Anonymous Author
20 February 2014 at 17:37

Dhiraj Barnwal thank you very very much. Is it possible to show random posts?

youtubi-fun Author
23 February 2014 at 04:55

Hello! Thanks for the widget.

I have 3 blogs with this widget.... and I have a problem in 1 of them..... I don´t know why, in this blog http://youtubi-fun.blogspot.com I can´t make it work like in the others. The images and the titles are with wrong format.

Can you help me?

Note: I have hosted de .js in my dropbox becouse I changed the "s72-c" format to "s72" (full image, not croped) and it works fine....

youtubi-fun Author
23 February 2014 at 05:10

In my last comment I forgot to say that the problem is more visible using Chrome (images and titles are not fitting) and in the Firefox the images are ok, and the titles not fitting....
Using your original widget (without my changes) the problem is the same.... I think my problem is something in my blogger template... but I can´t find it

youtubi-fun Author
23 February 2014 at 06:08

Ok solved!!!!!!!!!!!!!!!!

/* I add !important to correct img */
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0 !important;
padding:0 !important;

/* I add this CSS to correct titles li2 and li3 */
ul.abt-sidebar-slider li:nth-child(2) h4,ul.abt-sidebar-slider li:nth-child(3) h4{

4 March 2014 at 18:04

muito bom , gostei imenso :) ficou fixe

15 March 2014 at 13:57

How to remove borders?

Bojan Author
17 April 2014 at 03:07

Why not work with label? I put a link up to the label and put tagname "widget" but does not work. Where is the mistake?

Akinari Author
21 April 2014 at 06:55

Hi Dhiraj,

Blogger has changed their image upload servers, so even if you directly upload the images in the post, it still won't show on the slider anymore. It is no longer bp.blogger something, it is now google usercontent etc.

Any work arounds?

Akinari Author
21 April 2014 at 07:11

Actually I just realized that if I use my uploaded picture in "original size," it changes the URL and no longer shows/crawls the image into the sidebar, but if I use any other sizes and customize the size HTML, then it will be shown in the sidebar. Strange.

8 May 2014 at 10:35

Hi Dhiraj, It is an amazing work by you.

I appreciate your efforts and your spirit to do this at such a young age...

I have used your widget code in my web/blog

Have a look.

Can you guide what more I can do specifically for my home page.


All the best.

Anonymous Author
16 May 2014 at 14:23

This is almost perfect, how to make it shows a little bit of the post text too? I mean 100 o 200 characters of the posts (or a few more in the main tab), thanks in advanced for the hard-work !!

Anonymous Author
27 May 2014 at 17:37

Yes please, it need to include post content, I want to use it as alternative to "Automated Recent Posts Slider for Blogger" (http://www.allbloggertricks.com/2013/07/automated-recent-posts-slider-for.html) because the width size fits perfect in my blog :)

sniperhaxx Author
30 May 2014 at 22:23

Hi dhiraj dear i want to make those boxes fully transparent and text color into black ! i would love if you could help me !

sniperhaxx Author
30 May 2014 at 22:23

Hi i want to make them fully transparent and text color black what should i do kindly help me

22 June 2014 at 09:58

now my featured slide post wont work with this on the sidebar?

Jehad Hussien Author
28 July 2014 at 01:35

very nice i used it in my blog thanks for you

1 August 2014 at 14:45

my image arent showning...please inform me ASAP

Limba Willy Author
9 August 2014 at 12:48

Thank u 100% work

16 August 2014 at 07:14

wow i appreciate

Anonymous Author
26 August 2014 at 14:58

It worked for my site for a little while. But doesn't seem to be working anymore.

Anonymous Author
26 August 2014 at 15:22

Hi. It worked for me. But I changed settings to hide the gadget in pages other than the home page. Now, I can't see it on display.

Anonymous Author
28 August 2014 at 01:08

Something wrong with this nice widget? Stopped 27. August. Pls get it back on track ;-)

Berita Aneh Author
21 October 2014 at 13:41

sorry, but demo no work

Giorgos Ster Author
12 November 2014 at 13:03

Widget has stop working correct last 24 hours, images (blogspot loaded images) does not appear.
blog: http://stergiog.blogspot.com

Tech News 24h Author
19 January 2015 at 22:13

what widget do you use now on your site?

6 April 2015 at 19:04

Nice Work.. It works for me like charm
Thanks for sharing

Merci Park Author
29 May 2015 at 14:36

nice post !please visit my alsohotmail forgot password

Yogesh Gulati Author
16 July 2015 at 00:48

Your this post is very useful and also attractive for me and everyone. This is working on my webiste Best Shopping Sites

Emmanuel Alba Author
11 September 2015 at 11:29

I've used this widget but my other slider/carousel doesn't work anymore. what should I do to keep working all of those? Thanks

12 September 2015 at 20:46

Hi Dhiraj.... Very good widget... but there is a slight prob..... i want all my post shown automatically... presently only 4 posts are repeating

profit-tech Author
30 November 2015 at 04:25

yes, there is a way for that, dear.
if you need to add more than one label, you can create another label then added to posts of above labels. For example, you want to show posts under label (category) "sport", "headline", and "business" in homepage slider, so you can create a new label "feature", add this label to posts under three labels "sport", "headline", "business". After that, add to slider one label “feature” only.

23 April 2016 at 07:39

It works. Amazing look. But when I click a post in it, the post open a new window, instead of the same window. Can U change the code to stay at the old window.

7 June 2016 at 01:37

में जनता हु कि आप बेस्ट है पर ये मेरे लिए काम नहीं किया .. you can learn hindi with me .. visit..



Post a Comment

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