How to add an Image Slider to Posts on Blogger

Image Slider is the latest trend in blogging to show content images and info-graphic in a blog. You can see image slider in many blogs when you visited on a website. In this article, we will learn how to add an image slider on blogger.

Image slider is a cool way to showcase you’re graphic and image. It will increase the CPC (click-through rate) in your blog. And one other feature is loading time, it decreases the loading time on your blog page because all the image doesn’t load at the same time as compared to normal.

Note: In a survey, you can lose 10% of you reader just delay in one second page load time.

How to install image slider on blogger

 Image slider depends on the jQuery plugin. So first you need to check in your blog template code. jQuery plugin added or not. To check go to template section click on the HTML button, blog template source code are open. Move your mouse inside the code editor and click and click anywhere to activate the code view.

Also read: How to Embed Facebook Messenger Chat widget in blogger

Press Ctrl+F button on your keyboard to open search input box. Enter “jQuery.min.js” in the search bar and hit enter. If any “jQuery.min.js plugin added it will be highlighted. If there are no “jQuery.min.js plugin found in your template then first, we add the “jQuery.min.js plugin in the template.

Add this code your template right before </head> section.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Make sure first, backup your template.

Add Image slider styling in blogger

To add the image slider styling in blogger. You need to add this code in your template right before </head> section.

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" /> 

In the next part find ]]></b:skin> code in your blogger template. And the CSS styling code right before ]]></b:skin>.

 .bxslider img{
width:100%;
height:400px;
}
.bx-wrapper img {
display: inline !important;
}

Note: You can adjust the height and width as you want.

Add jScript to activate the image slider

Seach </head> section right before the </head> add this code.

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>

<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pause: 50000,
 // in millisecond
            autoHover: true, // pause on hover
            autoControls: true,
            captions: false
        });
    });
</script>

By this code, you can control the image slider properties like an auto slide.

• auto: true means slider automatically slides when the page load.
• autoControls: true means to navigate the slide back and forth enable. You disable this by replacing true to false.
• Pause: Time between the slider transition in millisecond.
• autoHover: Pause on mouse hover.

Add image Slider into Post

Your image slider is almost ready. Now you need to add images in your slider. There are no limits you can add as many sliders in your post or pages in your blog.

TO add the slider add this code in your post. Add a new post or open Your old post click on the HTML view and the given code.

<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>

Note: replace ImageURL1, 2, 3, 4 to your image url.

If you want your slider image is clickable you need to add herf tag in above code for example

<li><a href=“Your LINK"><img src=“IMAGE URL” alt=“ALT TEXT GOES HERE" /></a></li>

Now click on the compose button to revert HTML code view to normal view. You can see the image slider is properly add in your blog. Check the demo here.

Conclusion

Image slider is a best way to showcase you’re image and presentantion. It will increase the CPC (click-through rate) in your blog. And one other feature is loading time, it decreases the loading time on your blog page

• How to embed Instagram feed on website for free
• How to add AdSense Ads.txt file in blogger
• All In One SEO Pack For Blogger
• How to Delete Blogger Blog Permanently
• How to add contact form (contact us page) in blogger