Spice Up Your Blogger Blog with Custom Designed Templates - BTNT Services!

How To Add BTNT Responsive Slider Widget for Blogger Blog

On By // 34 comments
Responsive Slider widget for blogger 2013
Today I'm going to publish a Simple Responsive Slider for blogger blogs. As you may already noticed in the title that this a responsive sliderBut let me explain about it what is a responsive slider responsive slider is a slider widget which can adapt it's size to the resolution of the browser. It's easy to add and use. The main features of this slider is it's responsive, easy to use and the size of the script is just 1kb So, It's easy to load. :D

OK, That's enough ;)

you can check the responsiveness of the widget using the live demo given below.
Live Demo:-

How To Add Responsive Slider Widget to your blog

  1. Go to Layout >> Add A Gadget, then choose HTML/JavaScript
  2. Paste this code inside it.
    If your blog already have a jQuery Plugin then remove the highlighted code.
    (<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>)
    <style type='text/css'>
    .btnt-slider {  margin: 30px auto;  max-width: 850px;  padding: 0 20px;  }
    .rslides {  list-style: none outside none;  margin: 0 auto;  max-height: 400px;  max-width: 800px;    overflow: hidden;  padding: 0;  position: relative;  width: 100%; }
    .rslides li {  -webkit-backface-visibility: hidden;  position: absolute; border: 5px solid #555; display: none;  left: 0;  top: 0; margin: 0; padding: 0; list-style: none; }
    .rslides img {  display: block;  height: auto;  float: left;  width: 100%;  border: 0; margin: 0; max-width: 100%; }
    ul.rslides .rslides_nav {  height: 30px;  position: absolute;  text-indent: -99999px;  top: 45%;  width: 30px;  z-index: 9999;  display: none; }
    ul.rslides:hover .rslides_nav {  display: block;  }
    .prev {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisl8RNn9ULLSw7sBwoOBUAkXyRjT-eqYe7H1Dc8yQzL3BQDvvBNbHKg7yHAYPiO9G4vW_9TLHyuDjQXjXUayHQHkqwaqynp0V3VOreTvMlwb26KcSES7wDt1xc4MaX6L7clluUngGKSH_n/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
    .next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisl8RNn9ULLSw7sBwoOBUAkXyRjT-eqYe7H1Dc8yQzL3BQDvvBNbHKg7yHAYPiO9G4vW_9TLHyuDjQXjXUayHQHkqwaqynp0V3VOreTvMlwb26KcSES7wDt1xc4MaX6L7clluUngGKSH_n/s1600/arrows.png") repeat scroll right 0 transparent;  float: right; right: 15px;  }
    <script type='text/javascript'>
      $(function() {
          auto: true,
          speed: 500,
          timeout: 3000,
          nav: true,
          pause: true,
          prevText: "Previous",
          nextText: "Next",
          navContainer: "ul.rslides",
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src='https://googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM' type='text/javascript'></script>
    <div class="btnt-slider">
    <ul class="rslides">
    <li><a href="http://www.blogtipsntricks.com/"><img alt="" src="http://img-url.com/" /></a></li>
    <li><a href="http://www.blogtipsntricks.com/"><img alt="" src="http://img-url.com/" /></a></li>
    <li><a href="http://www.blogtipsntricks.com/"><img alt="" src="http://img-url.com/" /></a></li>
    • After Adding the above code Replace http://www.blogtipsntricks.com/ with your link
    • Then Replace http://img-url.com/ with the image link you want to show in the slider
  3. Now save the widget and See your blog. Simple Right? :D

To Show the slider only on homepage

If you want to show the slider widget only on homepage then add the above slider code in-between the following code.
<b:if cond='data:blog.url == data:blog.homepageUrl'>


Final Words...
Please let me know your views about this widget through comment and do share it with your friends. And I'm Really sorry for infrequent posting. From Now On I hope I'll publish frequent articles, widgets, templates and much more...

Stay Tuned...

Thanks Buddies ;)


  1. THanks for the widget ... wonderful slider.

  2. Hai.. thanks for the detail install.. If i'm not mistaken, this is one of the lightest slider js plug-in and i've used it in other platforms ie. concrete5 and works well. Great share from great minds.

    p/s: there's few customization made available but the main thing is, it works well on major modern browsers :-) Cheers

    1. Thanks for your comment. I'm happy to here that it supports other CMS :D

  3. Nice Sider. Easy To Load. And Fully Responsive Gr8 Dude...

  4. You just nailed it Chandeep bro ! :)The loading time of slider id quite low.I love it
    Best Responsive Blogger Templates of 2013

  5. This comment has been removed by the author.

  6. Very nicely done!! Nice and works perfectly.
    My latest post

  7. This comment has been removed by a blog administrator.

    1. Sure. :) I can Help you

      PS. Pls don't use links on comment unless it's important. We won't allow it ;)


    2. No need to sorry, Thanks for understanding :D

  8. Your image on Photobucket has down so all gif become to error. Please fix it for me. Thanks!


  9. Hello,
    Great Post, Great Slider!!!
    How you make it to play inside post page (your demo is live inside this post!)
    Could you please tell me how i can do the same?
    Thanks a lot!

    1. Follow the same procedure, but instead of adding the code in HTML widget place the code in HTML part of the post editor.

      Simple... :)

  10. Hi there,

    This is the best responsive image slider for blogger that i ever seen. Great jobs buddy!

    By the way, is the anyway or code to stop the slide AutoPlay? I want my blog reader to manually click on those sweet arrow. :)

    Thank you,
    Best Regards.

  11. How can I add this to the blog title area on blogger?

  12. because of ul li function or css it totaly messes my layout with lists

  13. great job!!
    is possible enlarge the size of the slider?

  14. It doesn't show up on the blog... Why?

    1. It's due to script hosting bandwidth problem. Just Updated to new host, Now everything works fine :)

  15. Hi Chandeep,
    Do you please create a post slider widget for blogger like of "http://bangla.irib.ir/"?
    I want to use a slider with post images and title link like that for my Bangla news blog: http://bangla.ngorg.com

    1. Sure, but I won't create the same looking widget, it'll have similar feature with unique design. :)

  16. Chandeep, this is amazing widget thank you so much...

  17. Hi Hi Chandeep, it's so beautiful, thanks! :D I use, but in my blog there is a space before the slider...

  18. Hi,

    Thanks for this great post!!

    How can I adjust the size??

  19. I tried this code in the blogspot. It works. Thanks for the widgets. whmcs bridge

  20. Thanks for the slider!
    However, it doesn't transition smoothly from one slide to the other for me. It changes dimensions with different pictures (even ones with the same dimensions). Any help you can give would be greatl appreciated! Thanks!

  21. Also, the navigation arrows are not showing up either

  22. please help me, some time ago slider become invisible, maybe you javascrpt code doesn't work anymore, please let me know the entire javascript code,

    'https: //googledrive.com/host/0B-P4_Fs3S76yQ1RVNnl0bVlLMXM'

  23. Please tell me BRo. How to get more visit in google search engine... my per. no. +919782004706

  24. It does not dis play on my site nic9ja.com what do i do


I Appreciate your valuable Feedback. So, Please DO NOT SPAM - Spam comments will be deleted immediately.

Don't use brand name in name field and you're not allowed to use links in comments unless it's necessary

Such Comments will be removed immediately.