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{width:100%;height:500px}
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}
</style>
<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'>
//<![CDATA[
FeaturedPostSide({
blogURL:"http://www.allbloggertricks.com",
MaxPost:8,
idcontaint:"#featuredpostside",
ImageSize:300,
interval:5000,
autoplay:true,
tagName:false
});
//]]>
</script>

Now save the template so that changes can take place.

Settings


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.

94 comments

24 April 2013 at 05:15

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

Thanks

Reply
24 April 2013 at 06:32

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

Reply
azizaqa ahmed Author
25 April 2013 at 03:58

super

Reply
Brandon Oh Author
7 May 2013 at 15:05

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

Reply
8 May 2013 at 00:57

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

Reply
Kobi Klaf Author
2 June 2013 at 08:41

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

Reply
2 June 2013 at 09:24

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

Reply
15 June 2013 at 12:50

good word demo here

Reply
19 June 2013 at 00:04

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

Reply
Anonymous Author
19 June 2013 at 17:00

This is not fully you lier..

Reply
20 June 2013 at 00:53

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.

Reply
XIAO XIAO Author
24 June 2013 at 11:28

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

Reply
25 June 2013 at 02:11

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

Reply
Naveen Kumar Author
28 June 2013 at 05:21

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

Reply
28 June 2013 at 05:24

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

Reply
AY PC Author
1 July 2013 at 08:12

ႊ့ႊႊThank! good Post.

Reply
Geo Nikola Author
2 July 2013 at 15:18

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

Reply
3 July 2013 at 04:40

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

Reply
Geo Nikola Author
3 July 2013 at 14:36

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

Reply
Jatin Author
8 July 2013 at 21:24

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

Reply
9 July 2013 at 01:47

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

Reply
nazhika Author
15 July 2013 at 01:23

thanks

Reply
15 July 2013 at 11:07

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

Reply
15 July 2013 at 12:41

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!

Reply
16 July 2013 at 06:40

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

Reply
16 July 2013 at 06:41

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

Reply
22 July 2013 at 07:40

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

Reply
22 July 2013 at 08:11

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

Reply
24 July 2013 at 05:52

Hi Gaurav I have made the widget you want get it at
http://www.allbloggertricks.com/2013/07/responsive-and-automated-slider-blogger.html

Reply
Geo Nikola Author
26 July 2013 at 15:19

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

Reply
26 July 2013 at 16:33

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.

Reply
27 July 2013 at 05:38

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

[pre]
.autname {
display: none !important;
}
[/pre]

Reply
27 July 2013 at 05:41

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

[pre]
ul.abt-sidebar-slider h4 {
font-family: Arial !important;
}
[/pre]

Reply
Vedant Swain Author
27 July 2013 at 06:41

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

Reply
27 July 2013 at 19:54

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.

Reply
28 July 2013 at 00:56

Hi

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.

Reply
28 July 2013 at 03:07

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

Reply
28 July 2013 at 13:36

Hi where precisely I need to add this code?

Reply
29 July 2013 at 02:18

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

Reply
viraj kale Author
7 August 2013 at 00:22

THANKS FOR THIS REALLY GREATE WIDGETCH SEE MY BLOG NOW COMPLETED WITH THIS NICE SLIDER http://nature-soft.blogspot.in/

Reply
16 August 2013 at 07:41

this is superb. thank you for your generosity.

Reply
Ufuk Doğan Author
21 August 2013 at 06:07

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

Reply
Prashanth Author
8 September 2013 at 10:11

Thanks! my blog looks great:-)

Reply
Hisoka Author
17 September 2013 at 06:41

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

Reply
21 September 2013 at 08:55

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

Reply
nanang Author
23 September 2013 at 21:51

great widget, thanks for sharing

Reply
Poky S Author
20 October 2013 at 10:55

Thank you , it works for my blog

Direct Download Stuffs

Reply
Poky S Author
20 October 2013 at 19:39

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

Reply
Rahul Jaykar Author
27 October 2013 at 09:11

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

Reply
Amy Author
31 October 2013 at 06:24

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

Reply
4 November 2013 at 17:25

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

Reply
MicroEdges Author
25 November 2013 at 06:24

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.

Reply
28 November 2013 at 06:05

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

Reply
Jithin Author
11 December 2013 at 22:57

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

Reply
SEO Tips Author
29 December 2013 at 08:12

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

Reply
29 December 2013 at 18:41

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

Reply
Anonymous Author
30 December 2013 at 19:44

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*

Reply
30 December 2013 at 20:49

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.

Cheers
Dhiraj

Reply
Anonymous Author
30 December 2013 at 22:20

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

Reply
faddas Author
26 January 2014 at 08:04

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

Reply
17 February 2014 at 22:37

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!

http://bloggertemplatescloud.blogspot.com/

Reply
Anonymous Author
20 February 2014 at 04:07

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

Reply
youtubi-fun Author
22 February 2014 at 15:25

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

Reply
youtubi-fun Author
22 February 2014 at 15:40

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

Reply
youtubi-fun Author
22 February 2014 at 16:38

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

/* I add !important to correct img */
ul.abt-sidebar-slider,ul.abt-sidebar-slider li{
margin:0 !important;
padding:0 !important;
list-style:none;
position:relative
}


/* 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{
font-size:80%
}

Reply
4 March 2014 at 04:34

muito bom , gostei imenso :) ficou fixe

Reply
15 March 2014 at 01:27

How to remove borders?

Reply
Bojan Author
16 April 2014 at 14:37

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?

Reply
Akinari Author
20 April 2014 at 18:25

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?

Reply
Akinari Author
20 April 2014 at 18:41

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.

Reply
7 May 2014 at 22:05

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
http://www.managementmasala.com/2014/05/how-to-make-your-organization-creative-thinking-powerhouse.html

Have a look.

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

managementmasala@gmail.com

All the best.

Reply
Anonymous Author
16 May 2014 at 01:53

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

Reply
Anonymous Author
27 May 2014 at 05:07

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

Reply
sniperhaxx Author
30 May 2014 at 09:53

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

Reply
sniperhaxx Author
30 May 2014 at 09:53

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

Reply
21 June 2014 at 21:28

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

Reply
Jehad Hussien Author
27 July 2014 at 13:05

very nice i used it in my blog thanks for you

Reply
ASDJHSAG WHE Author
1 August 2014 at 02:15

my image arent showning...please inform me ASAP

Reply
Limba Willy Author
9 August 2014 at 00:18

Thank u 100% work

Reply
15 August 2014 at 18:44

wow i appreciate

Reply
Anonymous Author
26 August 2014 at 02:28

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

Reply
Anonymous Author
26 August 2014 at 02:52

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.

Reply
Anonymous Author
27 August 2014 at 12:38

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

Reply
Berita Aneh Author
21 October 2014 at 01:11

sorry, but demo no work

Reply
Giorgos Ster Author
11 November 2014 at 23:33

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

Reply
Tech News 24h Author
19 January 2015 at 08:43

what widget do you use now on your site?

Reply
6 April 2015 at 06:34

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

Reply
Merci Park Author
29 May 2015 at 02:06

nice post !please visit my alsohotmail forgot password

Reply
Yogesh Gulati Author
15 July 2015 at 12:18

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

Reply
Emmanuel Alba Author
10 September 2015 at 22:59

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

Reply
12 September 2015 at 08:16

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

Reply
profit-tech Author
29 November 2015 at 14:55

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.

Reply
22 April 2016 at 19:09

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.

Reply
6 June 2016 at 13:07

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

https://goo.gl/Xh4sVr

Reply

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 |