Simple but an awesome
responsive slider widget for blogger that i am going to write the tutorial about and hope you will enjoy and implement it to your blog. Title of this article is introducing about what here i am going to share but if you are new to
blogging or web designing world, You might not no about
responsive design. So, before we go through the tutorial let me explain about what is responsive slider widget.
Responsive slider widget is a slider widget which can adapt it's size to the resolution of the screen of the device. It would be look perfectly in any device such as Desktop, Smartphone, Tab etc.
One of the best thing about this slider widget is that it is responsive and it has only 1kb size of the script. So, it won't be effect to your blog's loading time even it would be load fast and easy.
So, now let's move to the tutorial of adding responsive slider widget to blogger. But if you would like to see the demo first then go to
HTML EDITOR and place the below code in it then click on submit button to see the live working demo. :)
RELATED : Recommended posts slide out widget generator
How to add responsive slider widget to blogger?
- Go to blogger dashboard > Layout > Add a gadget
- Choose HTML/Javascript from the list.
- Place the following inside it.
<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/AVvXsEgMW498Ad95sVO6La7CiAaEI0nUy2DKKGQvzk9xWbxPr-nfkBAv2tEBJzjfok7N7_L8bCTnKooC3AJ1UmqbzV1dV9ltYAlcTIW3JHlGmgogHcg7-72Jti5MGEbvNF5xRsXjrs6Rs9jvSaUU/s1600/arrows.png") repeat scroll 0 0 transparent; float: left; left: 15px; }
.next { background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgMW498Ad95sVO6La7CiAaEI0nUy2DKKGQvzk9xWbxPr-nfkBAv2tEBJzjfok7N7_L8bCTnKooC3AJ1UmqbzV1dV9ltYAlcTIW3JHlGmgogHcg7-72Jti5MGEbvNF5xRsXjrs6Rs9jvSaUU/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.bloggerwidgetgenerators.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://www.bloggerwidgetgenerators.com/"><img alt="" src="http://img-url.com/" /></a></li>
<li><a href="http://www.bloggerwidgetgenerators.com/"><img alt="" src="http://img-url.com/" /></a></li>
</ul>
</div>
Now, replace
http://www.bloggerwidgetgenerators.com/ with your link and then Replace
http://img-url.com/ with the image link you want to show in the slider.
Note : If your blog have already installed jQuery plugin, Remove "
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>" from above code.
Finally, Save your widget & you're done !! ;)