Fully Automated Slider for Sidebar of Blogger



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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiCIZJRB950D1whG3w9QYP-fObgOUclDcDWhKnGP3WwFwhWF8qK4fbuFrcq483VBq3lJixcxArwTmoHsG97uhT0W5ocCG3RRrD4KENlioORJgrhlPMV_q_ujcn4aK9wyM9LEfBZAeO2LiM/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.

88 comments:

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

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

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

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

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

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

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

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

    ReplyDelete
  8. This is not fully you lier..

    ReplyDelete
    Replies
    1. 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.

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

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

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

    ReplyDelete
    Replies
    1. @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.

      Delete
  11. ႊ့ႊႊThank! good Post.

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

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

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

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

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

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

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

      Delete
  16. 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!

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

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

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

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

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

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

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

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

    ReplyDelete
    Replies
    1. 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]

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

    ReplyDelete
    Replies
    1. 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.

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

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

      Delete
    2. Hi where precisely I need to add this code?

      Delete
    3. add the code just above of the above code given in the post

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

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

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

    ReplyDelete
  23. this is superb. thank you for your generosity.

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

    ReplyDelete
  25. Thanks! my blog looks great:-)

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

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

    ReplyDelete
  28. great widget, thanks for sharing

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

    ReplyDelete
  30. 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 :)

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

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

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

    ReplyDelete
    Replies
    1. 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.

      Delete
  34. 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*

    ReplyDelete
    Replies
    1. 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

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

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

    ReplyDelete
  36. 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/

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

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

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

    ReplyDelete
  40. 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%
    }

    ReplyDelete
  41. muito bom , gostei imenso :) ficou fixe

    ReplyDelete
  42. 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?

    ReplyDelete
  43. 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?

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

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

    ReplyDelete
  46. 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 !!

    ReplyDelete
  47. 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 :)

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

    ReplyDelete
  49. very nice i used it in my blog thanks for you

    ReplyDelete
  50. my image arent showning...please inform me ASAP

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

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

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

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

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

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

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

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

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

    https://goo.gl/Xh4sVr

    ReplyDelete