How To Add BTNT Responsive Slider Widget for Blogger Blog

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;  }
   </style>
   <script type='text/javascript'>
   /*<![CDATA[*/
     $(function() {
       $(".rslides").responsiveSlides({
         auto: true,
         speed: 500,
         timeout: 3000,
         nav: true,
         pause: true,
         prevText: "Previous",
         nextText: "Next",
         navContainer: "ul.rslides",
       });
     });
   /*]]>*/</script>
   <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>
   </ul>
   </div>

• 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'>

<!-- SLIDER WIDGET CODE GOES HERE -->
</b:if>

---

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