.png)
Responsive Slider Widget For Blogger
If your blog is missing a slider that means you had missed one of the most important part of blog design so now it is your chance to add an Responsive Slider Widget To Your blog.
Install It Into Blogger
- Go to Layout >> Add A Gadget, then choose HTML/JavaScript
- 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://bloggeraxe.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggeraxe.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://bloggeraxe.blogspot.com/"><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>
- After Adding the above code Replace http://bloggeraxe.blogspot.com/ with your link
- Then Replace http://img-url.com/ with the image link you want to show in the slider
Now save the widget
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>
And DoNe.
0 comments: