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("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/arrows_zps95b22e18.png") repeat scroll 0 0 transparent;  float: left;  left: 15px;  }
   .next {  background: url("http://i1203.photobucket.com/albums/bb382/chandeep10/btnt-custom-theme/arrows_zps95b22e18.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://dl.dropboxusercontent.com/u/36169749/scripts/widgets/btnt-responsive-slider.js' 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 ;)

Read more

How to Reduce Your Blog Bounce Rate?

Every blog that exists on the blogosphere has some motive behind it. Some bloggers may want to share their ideas with the world, some just want a medium to write, and few write on a mission to help others with their own experience. However, there's one thing common between the blogs i.e. to attract as many as visitors to the blog.

To increase the number of followers who come and read what you have written. One should keep track of the blog’s visitors which gives you an idea of how many people are visiting your blog per day or in a month. This will also give you an insight on the traffic which is bouncing off i.e. the bounce rate of the blog.

For that, we need to know what exactly this Bounce Rate means? Everyday some new visitors come to the blog, some come through search engines and some come through links or references. However some or most of the visitors leave your blog as they land on it. They leave your blog by simply closing it down or by hitting the back button.

What can be the reasons for it?

1. The content is not relevant to the search term that brought them to your blog.
2. The information provided on the site is not that useful.
3. The site is not appealing enough to grab the attention of the visitor.
4. The load time of the site is very slow.

How to Track the Bounce Rate

One can track the blog’s bounce rate by signing up for Google Analytics. They will provide you with the tracking code which you need to add to all the blog pages. This will provide you with all the tracking data in your analytics account dashboard.

The formula used for calculating Bounce Rate is

Bounce Rate = Total single page view visits / Total number of visits.

So, what do you do to reduce the bounce rate? i.e. the number of people leaving the blog. Try some tips and tricks to make your blog more practical and useful to the visitors. Improve the blog quality to persuade people to spend time on your blog. Each and every single visitor is important and valuable for your blog and your blogging business. Mentioned below are few tips, which might be useful to make your blog effective and valuable for your visitors.

How to Reduce Your Blog Bounce Rate

#1. Make your Blog User Friendly

In order to reduce Bounce rate of your blog, the first thing you need to make your blog user friendly. A well user friendly blog gets more reader attention and they want to spend more time over there. Make navigation system of your blog simple. This will make it easier for your blog readers to get easily, what they are searching for.

#2. Write Simple Content

If you want your blog visitors to read your blog post and spent time on it, you must write your blog post simple and use clear titles for theme. Try to write in simple English, Provide information in simplest way, use relevant images in your post.

#3. Interlink your Blog post

Interlinking of your blog post is best way to reduce bounce rate of your blog. It will not only improve your blog bounce rate but also helps your blog SEO by passing link juice and anchor text benefits. It helps your blog readers to read another article on your blog. They like to click internal links on blog post to read many other related articles of your blog. It’s good to interlinking your blog post, but don’t put too many links for the sake of interlinking.

#4. Use Relevant Categories for Blog Post

It’s good idea to stop your blog visitor for some more time on your blog. It just gives your visitor a sort menu to your relevant blog posts. It lets your visitor to read more articles under same category by just clicking on a category or tag link. So it’s always a good idea to use relevant categories for your blog post.

#5. Speed Up Your Blog

Make your blog load faster. To speed up your blog, make your blog design simple, use the latest technology in your blog, you can also use CDN plugins for that. Your blog should load in fractions of seconds. Make sure your blog code is clean and clutter free.

So, these are the best tips to improve your blog’s bounce rate. Hope you like it. What other way, you use to reduce your blog bounce rate? If you have something to add to the list, then share if via the comment box below.

About the Author

Chiranjeev kumar is a Tech Blogger from India. He writes mostly about Blogging, How to Guides, SEO, Blogging, Blogger, WordPress, Technology and Social media at TechClause. Visit Techclause.com to know more about me.

Read more