Blogger Ever

How to add Jquery BX-slider slider in Blogger?

How to add Jquery BX-slider slider in Blogger?

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

How to add Jquery BX-slider slider in Blogger?
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.
How to add Jquery slider in Blogger?
If your template do not have this section then read this article to add this section.

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>
Now lets move to Slider.Slider have 3 elements.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 width and height of 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>
Replace the ImageURL and thier captions accordingly.This code will create 4 slides if you wan to add more slides then add the following line just before </ul>.

<li><img src="ImageURL" title='CaptionGoesHere' /></li>
Save it and you are done,if you still find any problem then our comments are always open. 
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.