How to Easily Add a Featured Image Slider in Blogger

Socialize It →

Tweet

5

Advertisements

Sliders are mostly used on the front page of your portfolio, business or personal web site. There are a lot of sliders available on the internet with each having its own unique feature. However, setting up, maintaining and editing a slider can be difficult for a non-technical person. In this article, we will show you, how to easily add a featured Image Slider in Blogger, which does not require frequent updating and it is updated automatically using Labels or when a new post is published.

What is Featured Image Slider

Image sliders of image carousels or slideshows is a nice way of displaying multiple images, content or videos on your website. Undoubtedly, images gives life to your content because it captures your visitor's attention immediately. 

Featured Image sliders are possibly the best way of showcasing one of your best recent content, articles, videos and etc. You don't have to update them on a frequent basis but you keep them with the best possible content available on your site.

Before we start our tutorial, it would be nice for you to take a look at the demo of feature image slider demo here.

How to Add Featured Image Slider in Blogger:

In this featured image slider, you do not have to update images or links manually. You do not have to edit codes or whatsoever because we have tried to keep simple and friendly for non-technical users. 

Firstly, go to Blogger.com >> Template >> Edit HTML >> and search for the closing </head> tag. Now just above the </head> tag paste the following CSS & JavaScript codes:

<script src="http://mybloggerlab.com/js/slider.js" type="text/javascript"></script>

<link type='text/css' rel='stylesheet' href='http://mybloggerlab.com/css/slider.css' />

After doing the first step you have successfully installed the featured image slider in blogger. Now all you need to do is to display the slider at the place which suites you the most. Just paste the following code at the place where you want your slider to appear.

<div id="featuredbwidget"></div>
<script>
featuredbwidget({
        listURL: "http://www.mybloggerlab.com/",
        featuredNum: 9,
        listbyLabel: false,
        feathumbSize: 250,
        interval: 3000,
        autoplay: true,
        featuredID: "#featuredbwidget"
    });
</script>

Now to allow you to customize the image slider, we have provided you with a few options which you can change in the above script:

listURL:	Insert your blog URL here just like we have used mybloggerlab.com URL in the above script.
featuredNum:	How many number of featured image slides you want to show on your slider
feathumbSize:	What should be the size of your images in width
autoplay:	If you want to stop auto sliding change it to autoplay:false
listbyLabel:	If you want to show images from a specific Label then change the above code to listbyLabel:"AmazingVideos".

In order to display it in your sidebar, go to Blogger >> Layout >> Add a Gadget >> Add HTML/JavaScript >> paste the above code in the HTML box and save the widget.

We hope this tutorial has helped you in learning how to easily add a featured image slider in Blogger. We will be bringing more great blogger widgets in feature to stay tuned and subscribe to Facebook, Twitter or Google+.

Advertisements

About the Editorial Team

The Editorial Team of MyBloggerLab consists of a group of Professional Blogger geeks Led by Syed Faizan Ali (Founder of MyBloggerLab).