Jquery plugins helped really in designing complex stuff,some like sliders.Sliders provides a bit of animation and creativity in a small space in a blog/website.In this post I'm going to tell you how to add a bx-slider in your Blogger template with right and left control,auto sliding and start and start and stop button.The reason behind using this slider is that it is responsive.Its easy and quick so lets start.
Screen Shot
 |
| This screenshot do not have captions in it but it will show on your blog. |
In a default Blogger Template,their is a big section below the header for the user to add any element as shown below.
So first we will add
Jquery in the template,but if you already added Jquery then do not add again or else it won't work. Follow the below steps to add Jquery. - Go to Template > Edit
HTML - Find
<head> - Paste the following code just after
<head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>Jquery,CSS and HTML.We will add Jquery and CSS through an external style sheet that BX-Slider has provided while HTML format will be followed accordingly to add the desire slides.- Add the following line just after
<head>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />- Now find
]]></b:skin>and paste the following code just above it.
.bxslider img{
width:100%;
height:300px;
}- Replace the
widthandheightof the images,according to your need. - Add the following code just before
</head>
<script src="http://bxslider.com/lib/jquery.bxslider.js"></script><script>
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
captions: true
});
});
</script>
- Now save template and go to Layout
- Click on Add widget on the section you want to add slider
- Find and click
HTML/javascript - Add the following code in it.
<ul class="bxslider"><li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>
</ul>.
<li><img src="ImageURL" title='CaptionGoesHere' /></li>
i have problem in the code that paste before /head>
ReplyDeleteThank you for pointing the mistake,the code is updated and will work fine.
Deletethanks a lot bro :)
Delete