Using Sliders in your Blog or Website is very beneficial. Each Slider have a unique feature and it may sounds difficult for many of you to setting up one. In this article, we will show you, how to easily add a featured Image Slider in Posts on Blogger.
1.INSTALL THE SLIDER
Log in to your Blogger account. Go to Template , back up your Template first , then click on Edit HTML .click inside that box of code and hit Ctrl + F and search for the closing </head> tag. Now just above the </head> tag paste the following code :
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js'/>
<link href='http://bxslider.com/lib/jquery.bxslider.css' rel='stylesheet' type='text/css'/>
<script src='http://bxslider.com/lib/jquery.bxslider.js'/>
<script>
$(document).ready(function() {
$('.bxslider').bxSlider({
auto: true,
autoControls: true,
captions: true
});
});
</script>
2. STYLING THE SLIDER
Search for the closing ]]></b:skin>
Now you are going to add the following code right before ]]></b:skin>
N.B : you can change the width and height of the slider in that code if you want to.
.bxslider img{
width:100%;
height:500px;
}
.bx-wrapper img {
display: inline !important;
}
3 . Using THE SLIDER
Insert the following code in your Post :
<ul class="bxslider">
<li><img src="imageURL1" title="ImageTITLE1" /></li>
<li><img src="imageURL2" title="ImageTITLE2" /></li>
<li><img src="imageURL3" title="ImageTITLE3" /></li>
<li><img src="imageURL4" title="ImageTITLE4" /></li>
</ul>
Past your Image URL , dont forget the "https://" or " https://" : the last one is recommended , and the Image Title.
EmoticonEmoticon