How To Add Responsive Slider Widget For Blogger Blog

Adding responsive slider widget for your Blogger blog is necesssary especially if you want to have a better user experience. They can use the silder button (next-previous) to select the image with a corresponding post that link on it. This slider is easy to use and to customize so that you can adjust it according to your likeness.

Also read:

• JavaScript Image Slider For Blogger


• How To Add A Tiny JQuery Circleslider To Blogger


• How To Create Professional Image Slideshows with Jquery In Blogger


• Create a CSS Image Slider with Thumbnails for Blogger

Live Demo

Add Responsive Slider Widget For Blogger Blog

Step 1. Go to your Blogger Dashboard >> Layout >> Add A Gadget, then choose HTML/JavaScript
Step 2. Paste the code below inside it.

<style type='text/css'>
.btt-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/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/s1600/arrows.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
.next {  background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhZcXoxrwpVBQvpY881xTwz1UtYPLT80kiUuApYLif8ND7hyphenhyphenqQGOOKdQ-kjPN9YXI90G_V4vqucp2xrCqFy0t7OiK0x-i8g8aLCy2x_XZz1TuP1sTwWqTddMzD2dt0YB6JqmQHpbJt2hSVV/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="btt-slider">
<ul class="rslides">
<li><a href="http://bloggingtipsandtrix.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggingtipsandtrix.blogspot.com/ "><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>

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

Customization:

Replace http://bloggingtipsandtrix.blogspot.com/ with your  own link.
Then Replace http://img-url.com/ with the image link you want to show in the slider. Click here how to get the image link.
Step 3. Save the widget and you're done buddies. See now  your blog with its responsive image slider.( =D
Hope you learned something with this tutorial and Stay tuned with our coming posts!
Reference: btnt