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
Advertisement
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;  }
    </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 ;)

34 comments:

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

    ReplyDelete
  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

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

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

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

    ReplyDelete
  5. This comment has been removed by the author.

    ReplyDelete
  6. Very nicely done!! Nice and works perfectly.
    My latest post
    http://sneeze10.blogspot.in/2013/05/3-simplest-programming-languages-for.html

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

    ReplyDelete
    Replies
    1. Sure. :) I can Help you

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

      Thanks.

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

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

    http://s1203.photobucket.com/user/chandeep10/media/btnt-custom-theme/color-chronicl.gif.html

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

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

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

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

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

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

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

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

      Delete
  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

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

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

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

    ReplyDelete
  18. Hi,

    Thanks for this great post!!

    How can I adjust the size??

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

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

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

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

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

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

    ReplyDelete

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.

Thanks,
Chandeep