Fully Automated Slider for Sidebar of Blogger

Dhiraj Barnwal Monday, 15 April 2013 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.
Labels:
Google+ Pinterest

94 Comments to Fully Automated Slider for Sidebar of Blogger Post Yours! Read Comment Policy ▼

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

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

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

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

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

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

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

This is not fully you lier..

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.

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

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

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

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

ႊ့ႊႊThank! good Post.

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

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

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

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

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

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

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!

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

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

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

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

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

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

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.

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

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

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]

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

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.

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.

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

Hi where precisely I need to add this code?

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

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

this is superb. thank you for your generosity.

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

Thanks! my blog looks great:-)

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

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

great widget, thanks for sharing

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

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

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

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

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.

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

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

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

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*

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

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

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

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/

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

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

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

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

muito bom , gostei imenso :) ficou fixe

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?

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?

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.

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.

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

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

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

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

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

very nice i used it in my blog thanks for you

my image arent showning...please inform me ASAP

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

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.

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

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

what widget do you use now on your site?

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

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

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

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

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.

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.

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

https://goo.gl/Xh4sVr