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
Add Responsive Slider Widget For Blogger Blog
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
About the Author:
Hello folks! This is GOLDEN WORKS TV, the admin of this blog. No words could described my grateful appreciations to all newbie and professional bloggers around the world and most especially to Almighty God who gave me the wisdom...Read More
very nice information and these information is also very useful to you How to create Banner with scrolling using Html in 1 minute
ReplyDeletevery nice information and these information is also very useful to you How to create Banner with scrolling using Html in 1 minute
ReplyDeleteCreate slider with HTML | How to create slider with photos using html only
ReplyDeleteCreate slider with HTML
ReplyDeleteThe article is so appealing. You should read this article before choosing the Big data modernization solutions you want to learn.
ReplyDelete