Carousel slider for Blogger blogs

Have you been thinking about adding a Slider to your blogger blog?
Here is the tutorial to add a Carousel slider for Blogger blogs using JQuery & CSS. You dont need to read about JQuery or there is no learning curve involved. Even if you havent edited your blogger template, we got you! We will cover all aspects of getting this Slider working for you and customize to your needs.

This is how the slider will look like.
carousel slider, blogger, blog, jquery slider, featured, sidebar, carousel slider for blogger blogs

Here is a Live demo

First things first, here are the list of features this slider is built with
  1. Automatic 'Slide and Pause' style, manual scrolling as well.

  2. Automatically shows a category of posts. NO need of manually assigning the posts to slider.

  3. Easily customizable and extendable with easy CSS tricks and other simple variable initialization to control the slide and pause.

  4. Highly engaging, drives attention towards the articles.
Like what you read, want to implement it on your blog? Here is a step-by-step procedure to get this Carousel slider for Blogger blogs implemented on your blog.

  1. Go to your

  2. Click on your blog and click on Template

  3. Backup your template - Click on Backup/Restore and click on Download Template and save the template file.
    Note - Its always a good practice to backup your template before making any changes

  4. Click on Edit HTML now

  5. Find </head> tag and place the below code before the </head> tag

  6. Copy the below CSS code and paste it within the <head> tag
  8. Depending on where you want to have the slider displayed, place the below code there
  10. Save your template and open your blog to see the slider.

So with this slider, if you want to feature certain posts on your home page or sidebar or anywhere. All you have to do is, create a new label named for example "Featured" and label the posts as "Featured". Assign the "Featured" label to this slider, all posts with Featured label will be slid within the slider.

Below are few of the variables you can adjust in the javascript to customize certain functionalities, you can also change the way the slider slides the posts.

  1. Change the label name from "Featured" to whatever Label name you want featured on the slider. (variable label1 in step # 5)

  2. Assign the number of posts to slide in the slider (variable numposts1 in step # 5)

  3. Choose to make the title bold (variable aBold in step # 5, true makes the title bold)

  4. Assign number of summary post characters (variable summaryPost in step # 5)
And if you want to change the layout of the slider, resize or color. Adjust the size, color, speed accordingly. Here are few tips

  1. Change the height of the overlay title to increase the height on individual slider items (height attribute of slider_title element - step#6, line#6)

  2. Change the height of each slider item (height attribute on step#6, line#5)
That was how to add Carousel slider for Blogger blogs. I hope this post was helpful. If you guys have any question, please leave your comments below.

Here is a Live demo


  1. A helpful post, Rakesh.
    I would love to use it in my Blog.
    I tried the code.
    But, it's not working for my Blogger Blog.

    Need your help for points #6 & 7.
    Exactly where do I have to paste the above code?

    What do you suggest- have the Carousel just after the Blog Title?
    Or the content Tabs?

    The latter means that the carousel won't be displayed for entire length of the page as the right hand side has the widgets- Top Indian Blog & Followers.

    Please suggest.
    Thanks :)

  2. btw checkout this demo site with the slider below site title spanning across the content and sidebar