How to Easily Add a Featured Image Slider in Blogger

How to Easily Add a Featured Image Slider in Blogger
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 >> Template >> Edit HTML >> and search for the closing </head> tag. Now just above the </head> tag paste the following CSS & JavaScript codes:

<script src="" type="text/javascript"></script>

<link type='text/css' rel='stylesheet' href='' />

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>
        listURL: "",
        featuredNum: 9,
        listbyLabel: false,
        feathumbSize: 250,
        interval: 3000,
        autoplay: true,
        featuredID: "#featuredbwidget"

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

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

Comment With:
Choose Wisely!


June 8, 2016 at 8:19 AM

Hello sir, please does this slider have an effect on the time load of my webpage?
Because i read on a guide on blogging and online hustle that sliders delay load time and might reduce my earnings.

June 26, 2016 at 2:38 PM

I would love to know too. did it work for yoU?

June 27, 2016 at 2:24 AM

Please how will I show the image I like?

Editorial Team MOD
June 27, 2016 at 1:21 PM

Yes, It works fine please check the demo.

Post a Comment

We’re eager to see your comment. However, Please Keep in mind that all comments are moderated manually by our human reviewers according to our comment policy, and all the links are nofollow. Using Keywords in the name field area is forbidden. Let’s enjoy a personal and evocative conversation.

Helping You to do Cool Things With Blogger Since 2012™.

© Copyright 2012 - 2016. MBL Networks, All Rights are Strictly Reserved.