How to add an Image Slider to Your Blogger Blog

How to add an image slider in Blogger
Last updated: 4 December 2015.

We have a great question this week from Kaina! All you Blogger folks listen up, because this one is just for you!

I was just wondering since I have a blogger blog do you know of any good picture sliders I could find or the process in which to make one? I would appreciate it tons!! πŸ™‚

To make the image slider work, you need to add some extra files to your site. We need to add one or two JavaScript files and one CSS file.

Step 1: Add the jQuery library (if you don’t already have it).

First, you need to figure out if you need to include jQuery or not. The easiest way to do that is to visit your block, right click, select “View Page Source” and do a CTRL+F search for jquery.

If you get a result, then you probably do have jQuery on your blog.
If you DO NOT get a result, then you don’t have jQuery and you need to add it.

Skip to the next step if you did in fact get results from the above check.

Add a new HTML/JavaScript gadget to your footer in your Blogger layout (at the very bottom).

HTML gadget placement in footer

Paste this inside of the gadget text box:

<script src=""></script>

Step 2: Add the Nivo Slider JavaScript to your site.

Next, we’re going to add the Nivo Slider file to your site. This is also going to be added in the footer, so if you followed step #1, you can use the same gadget. Otherwise, add a new HTML/JavaScript gadget to the footer of your site (at the very bottom).

Then paste this inside your gadget:

<script src=""></script>

Here’s what my gadget looks like with thte jQuery and Nivo Slider script:

JavaScript in a Blogger gadget

Step 3: Nivo Slider script initiation.

Now we need to add a custom bit of JavaScript to tell our site, “Hey, start that image slider please!”

The snippet we’re working with can be placed at the end of the gadget we used before. It looks like this:

<script type="text/javascript">
$(window).load(function() {

So go ahead and throw that into the gadget. It must be below everything else.

Step 4: Add the Nivo CSS file.

This part involves digging through some code, but it’s not that bad—I promise.

Inside Blogger, go to Template > Edit HTML. This brings you to the scary template code page. Luckily you just need to find one line near the top. It looks like this:


Again, it should be very near the top.

Then, paste this directly above it:

<link rel="stylesheet" href="" type="text/css" media="all" />

Finding the closing </head> tag in the Blogger template editor.

Step 5: Add Images to the Slider

So at this point we have the slider code on the page, but no actual slider! Let’s add some images.

Here’s the main code you want to use for images:

<div id="ng-nivoslider" class="nivoSlider">
	<a href="URL TO LINK TO"><img src="IMAGE URL" alt="DESCRIPTION OF IMAGE" /></a>
	<a href="URL TO LINK TO"><img src="IMAGE URL" alt="DESCRIPTION OF IMAGE" /></a>
	<a href="URL TO LINK TO"><img src="IMAGE URL" alt="DESCRIPTION OF IMAGE" /></a>

See the three repeated lines in the middle? Those are the ones you want to edit. You can also add more if you want more than three images in your slider. Be sure to replace each piece of capitalized text with what you need. A final example might look like this:

  • href="URL TO LINK TO" — Enter the URL you want people to go to when they click the image.
  • src="IMAGE URL" — URL for the image.
  • alt="DESCRIPTION OF IMAGE" — In a few words, describe the image. (If there’s text on the image, type it out.)
<div id="ng-nivoslider" class="nivoSlider">
	<a href=""><img src="" alt="Black City by Elizabeth Richards" /></a>
	<a href=""><img src="" alt="Beautiful Disaster by Jamie McGuire" /></a>

Once you have your final code, you just need to add it as a new HTML/JavaScript gadget. Create a new gadget (don’t use the old one!) and place it wherever you want on your blog.

Screenshot showing where I placed my image slider gadget.

Updating the slider with new images.

If you need to update the image slider at a later date, simply go back and edit that HTML gadget. You can remove old banners:

<a href=""><img src="" alt="Black City by Elizabeth Richards" /></a>

And add in new ones with different image URLs.

Just don’t touch the code at the start of the gadget:

<div id="ng-nivoslider" class="nivoSlider">

or at the end:


Those lines need to remain in tact for the slider to work.

Here’s how it looks!

Here’s an example of how the Nivo Slider will look on your blog! This is a screenshot of my horrible, boring, test Blogger blog, but only look at the image slider, LOL!

Screenshot of image slider in Blogger blog

Questions? Comments? Let me know!

Photo of Ashley
I'm a 30-something California girl living in England (I fell in love with a Brit!). My three great passions are: books, coding, and fitness. more »

Don't miss my next post!

Sign up to get my blog posts sent directly to your inbox (plus exclusive store discounts!).

You might like these


  1. I cannot get this to work whatsoever. I have looked this over millions of times and can’t see what is wrong. All I get is that the slider is loading and it is very frustrating. Any help would be great.

    Caleb recently posted: Squad Shirts...
    1. Because you haven’t included jQuery on your blog. You need to check the box to include jQuery.

    One problem though, when you click the slider, and go to one of my posts, there’s this HUGE space between my tabsbar, and my date.
    I`ve figured out how to take the space off between my tabsbar and my slider on my main page, but not on an actual post!

    1. That’s something you have to change in the CSS. Adding this should fix it:

      #main .widget { margin-top:0 !important; }

  3. hi! when i tried to load the slider it popped up on the right hand side of the page. how do i make it show in the top middle of the page under the header? i moved the gadget right under the header but it still shows on the right.

    1. Can you include a link to your blog with the slider? It should be working fine so it’s hard for me to explain what might be wrong without seeing it on your blog. πŸ™‚

      1. I played around with the widgets and fixed it but now…..when the images are transitioning you can see the image on the side? help! site is thank you!!!

        1. Do you mean that on the first image you can see a tiny bit of the image after it? That’s because your first image is too small. It’s smaller than the space the slider takes up. If you want it to look perfect then your images have to be at least 640×300 pixels.

    1. I’m not quite sure what you mean by adding a title? Additional text above the caption? I don’t think that can be done with the Nivo Slider. (Or at least not without tweaking it or adding additional code, which isn’t covered in this tutorial.) If you want something with that feature you’ll probably have to find another slider somewhere.

  4. I followed the steps but am still having difficulty viewing my photos. The automated loader is the only thing appearing on the site. Plus, I checked yes for the jQuery Plugin. What else can I do?

    1. Are you sure you select ‘yes’ to include jQuery? Because I checked your blog and it doesn’t have jQuery on it!

      1. Yes, I’m sure. I just went back and did the process again but for some reason jquery won’t install on my computer. :/ Thanks for your fast reply btw.

        1. …According to my Macbook, my blog does have jquery (seen on lines 1030 and 1033)
          1033 jQuery(document).ready(function($) {

          1. That’s not jQuery. That’s the image slider, which depends on jQuery (which is why jQuery is in the name). I just checked the generator again, and you actually need to select “NO” to include jQuery. (Because you select “Yes” if your blog has the plugin, but since yours doesn’t, you need to select “No”).

              1. The problem is that your images don’t end in an image extension. The images you add to the slide have to end in one of these:


                For example, this is one of the image URLs you put in:


                Notice how it doesn’t end in one of those extensions. Here’s an example of an image that would work:


                Because it ends in .jpg

                1. Hi there, I am just busy following this tutorial and having the same issue because my images are coming from Picasa. How exactly did you resolve the image extension issue? Thank so much

  5. I installed a template that has a slide already but i don’t know how to change the inbuilt image that slides and add my own please help me out.

    1. All image sliders are different, and there’s no universal way to do it. So unfortunately I can’t help you with a theme-specific slider. You’ll have to contact the theme developer or look for the documentation.

  6. Well, i followed all of the instructions given and it didnt turn out right so i downloaded jquery from some website and then tried it again and it still doesnt work. after some experimenting, i decided it would just be best to comment on here. id like my slideshow to be at the very top after you help me get it to work. and also, i added 3 pictures to my slideshow but it doesnt appear to be moving at all… please reply asap

    1. Well right now it looks like you have at least 2 instances of jQuery on your website, which is a big problem! If you’re calling it twice, things are going to conflict and it won’t work. Remove one of them and see if it works then.

        1. They would most likely be in the gadgets, but it depends on the template and whether or not you put them in their yourself.

          If you want to CTRL+F search through stuff, look for this:

          The jQuery stuff starts with that and ends with something like:


          There are two in there that I can see and one needs to be removed (ideally you should remove the second one, which is further down on the page).

          1. alright, i deleted the gadget at the bottom now i think there is only one instance of jquery on my site. i checked the template coding and i found this:

            but that is only on there once so im assuming there is only one instance of it on my site now. but the problem now, is that the 3 pictures that are supposed to go into the slideshow are just laid.

            Obviously Not Dr. Seuss recently posted: The Elder Scrolls Online Free Beta Download And Codes
  7. Hi, I cant seem to make it work on my site. It shows the first photo but its not sliding to the next one.

    1. You need to opt to include the jQuery plugin when you do the Nivo Slider settings, if you didn’t already.

      1. Its working now! For some reason, its not working if I put # in the caption for the image.

        Thank you so much for this tutorial!

  8. How can i change the background of the Nivo Slider? It does no match my blogger.(i mean the grey gradient ones) thanks.

    1. This tutorial uses an image slider called the Nivo Slider. If you want features that aren’t available on the Nivo Slider then you’ll have to find an alternative.

  9. Hey Ashley! I’ve literally just added this to my blog as this other slider I tried didn’t work – so thanks! However, something that’s irritating me is, the caption where you can write wherever you want – won’t go white. I can highlight the text in the caption box, but the font seems to be black and I can’t change it to white. o.O I’ve been coding for years, but I’m a bit rusty lately, do you have any idea how to change it to white like yours? I’ve tried going in manually and changing the;

    but it’s not working.
    Thanks! πŸ˜€

    1. It’s most likely because you have a JavaScript error on your site. One JS error can cause other JavaScript (like an image slider) to not work. Here’s where the error is occurring:

      <script type=’text/javascript’>
      jQuery(document).ready(function(){var $box=jQuery(‘.post’),$bar=jQuery(‘a.bar_view’);$dat=jQuery(‘a.dat_view’);${$box.removeClass(“bar”);jQuery(this).addClass(‘active’);$bar.removeClass(‘active’);jQuery.cookie(‘dat_style’,0);return false});${$box.addClass(“bar”);jQuery(this).addClass(‘active’);$dat.removeClass(‘active’);jQuery.cookie(‘dat_style’,1);return false});if(jQuery.cookie(‘dat_style’)==0){$box.removeClass(“bar”);$dat.addClass(‘active’)}else{$box.addClass(“bar”);$bar.addClass(‘active’)}});

      If you remove that block of JavaScript then it might work.

      1. Finally!!! it works!. I spent the whole day figuring out what’s wrong. thank you so much! thank you thank you thank you

  10. how many images can it support..
    i promote wallpapers on my blog, so mainly it is only images, so was looking for a slider which could support at-least 800-1000 images..

    is this slider suitable for my blog?

    1. You don’t want to put 1,000 images in this image slider. All of the images in the slider are on the same page and are loaded at once, meaning you’d have to wait for 1,000 images to load before the page will load fully.

      If you really want to put 1,000 images in there, you’d want to find a different image slider that doesn’t load the images all at once.

  11. i want to add this slider but how to get url of my images i have images in my computer so how i will get iamge url of that pls help -)

    1. You have to upload your images to an image host, like Photobucket, TinyPic, or even straight into Blogger. Then they’ll give you some URL options and you have to copy the one that ends in an image extension like .jpg, .png, or .gif

  12. Gah..I seriously love you right now!!! I have been looking forever for an EASY blogger slider to set up, but most of them require going into my templates html and doing a ton of work, and then it doesn’t even feel worth it! This is so easy, thank you thank you THANK YOU! (:

  13. I’ve added this slide to my blog and it seems to be working perfectly except for one thing… it doesn’t go on a loop. I mean, I have 5 images and when it ends the 5 images, it gets blank, rather than returning to the first one. What am I doing wrong?

        1. The problem might be that you put the JavaScript in the wrong place. It’s appearing at the top of your blog, but you want to put it at the very bottom.

          (Note: This won’t affect where your slider shows up. But it does affect how your blog performs. You want to put JavaScript at the bottom.)

          1. Can you explain how do I do it? sorry, I’m a newbie! haha
            Also, is there a way to put that very specific widget with a transparent background?
            Thank you so much for all your help in advance!

            Ester recently posted: Written in the Stars
            1. The instructions should be in step #1:

              Navigate to β€œLayout” and add a new β€œHTML/JavaScript” gadget at the very bottom. Paste the code from the generator in the box and save.

              You just want to add a gadget in one of the very bottom spots, instead of at the top.

              To remove the background, you have to add this bit of CSS:

              #HTML7 { background: none !important; }
              1. hmm my javascript widget is actually already at the very bottom, it’s my last widget really… I can’t figure out what I’m doing wrong…
                that CSS worked perfectly, thank you so much!

                Ester recently posted: Written in the Stars
                  1. I seem to have removed the last error now but the slide still doesn’t work. I’m definitely a bit new at this so I don’t seem to be able to fix the slide πŸ™
                    I don’t want to be a pain in the neck for you so I guess I’m just removing the slide. thank you so much for the help!

                    Ester recently posted: Written in the Stars
                  2. I have just tried to remove all errors as possible and it seems to be working now! thank you so much for all the help, you’re amazing!

  14. Great post! I was wondering if you could tell me how to make it so this slider only shows up on the main/home page of my blog? I haven’t been able to find any place that explains how to do this, please help! Thanks πŸ™‚

    1. When you do the step to add the slides just select “Homepage” in the drop down, instead of “All Pages” (which it is by default).

        1. You uploaded an image that’s 320×117 pixels.

          The image slider area is 900×330 pixels.

          So as you can see, your image is significantly smaller.

  15. Not sure if I over looked this. So I apologize, in advance if I did, but can this be used for a specific post instead of the layout of the blog? If so, how would I go about doing that? I’m trying to help a friend who has a blog with Blogger.

    Natasha recently posted: Julep Maven – November
    1. That is possible to do, but not with this generator/tutorial. You’d have to basically make the whole thing yourself in order to do it.

  16. Hey, I am using a blogger template, and it has an image slider already in it. I was wondering if you know how to make all of the images the same size?

    Thanks a bunch,


  17. I seem unable to get the slider to come up on the “Homepage only” on my main blog ”” although it works ok on the test Blog.
    Does the drop down menu put code into the Blog HTML when it compiles? I have tried copy/paste from the test blog into the main blog but it still come up on all pages. On all pages it is a great slider, thanks for you help.

    1. Are you adding the slides to your blog using the “Add to Blogger” button from the Nivo Slider generator?

  18. Thank for the reply. Yes I have used the “Add to Blogger” but it then puts the images in a different gadget on my page. I then copy/paste it to the same as the script generator is in. I think I may have spotted my mistake. I added a name to the Script that is different than the Image part. The image has the ” wow slider by w2blogging” added automatically the scrips I named “Wow”. I hope that makes sense. I will try and name both parts of the gadget the same and see what happens. It should then build the gadget in one go all in the same location.
    Bit busy today but may get the chance.

  19. Thanks for your tutorial…worked great! Can you tell me how to get rid of the gradient stripes behind the slider? They showed up green and look terrible with my blog template. Thanks!

  20. I’m having difficulty when it comes to generating the slides. I open the slide generator, insert all of the urls for the images I want, click “generate”, and I get to the page that verifies that I want to add it to my blog… only, nothing has been generated. It won’t let me add it to blogger because the widget has no content. All I have is a title. When I click “edit content”, there’s nothing there. No codes, nothing. Is there some blaringly obvious step I have missed, or am I just getting some random error? I have tried it numerous times, and nothing is ever generated for all of my efforts. I am using Chrome for this, by the way.

  21. Hey Ashley, I got the same problem as Andrea.. Everything works fine, but after clicking “Add to Blogger” the box “Edit content” on Blogger is blank, empty. There’s no code in it. What’s the problem here? FYI, I am using Internet Explorer.
    Hope to hear from you.

    1. Hi, Rosanne, I think the problem lies with the generator itself. I managed to get around the issue by creating another html/javascript widget in the layout section of my blog & pasting in the code Ashley gives above under “So How Do You Update the Images”.

      You can then edit the individual components manually using the method she suggests above for replacing photos, links, and titles. If you want to add more pictures, simply copy and past the code beginning with “a href” and ending with “/a” and replace the individual components as needed.

      Make sure you still have the first html/javascript installed on your blog. In order for my method to work, you will still need that. I haven’t quite figured out how to keep the slider from showing up on all of my pages using my method, but for now I’m just glad it works.

      I hope that helps!

        1. You are welcome! My husband can attest to the fact that it was driving me CRAZY. I could not rest until I had it figured out. I’m glad I could help you, too.

  22. So glad I found this! I had this exact slider on my blog for ages but it all of a sudden quit working and couldn’t figure out what went wrong so I just deleted it. But then I came across this post and redid it all and it’s working again! Thanks so much πŸ˜€

    1. Same for me … I don’t get it. I think the prob comes from blogger because I have had exactly the same thing going on with some others widgets. Or firefox maybe?

  23. Thanks for your easy-to-understand post! When I press on the add to Blogger button, it transfers me to a Blogger page and when I click “add the widget” I always get an error message. It says: widget.content: Required field must not be blank
    I thought it was supposed to be generated automatically… Is there something I should write?
    Thank you!

    Stephanie recently posted: Saturday's Stuff I Like
  24. Thank you for this great post.
    But I have a little problem!

    The slider is visible on every page but I just want him to be visible on the home page.
    What do I have to do??

    Wish you happy easter days!


    1. Oh there’s an option when you generate the slide images for what pages you want the slider to be on. It’s a drop down menu below. πŸ™‚

          1. Actually, Ashley sent me this:


            It worked for me, but what I was talking about was how I can’t generate the slider images code, but I got someone else to do that for me…

            Hey Jana, whats your blog? I’d love to check it out!

  25. Hey Ashley, great post! But the only problem I’m having is that the generator for the slide images code doesn’t show up when I click ‘Add to Blogger’. I’m wondering if I’m doing anything wrong or is something wrong with the generator? I know this is a bit of a stupid comment but I just wanted to know if I’m the only one having this problem…. heh…

    1. arrrrghh! ok, so i’m at the “add the images” part. I’ve added the image urls, captions and links to send when clicked. I generated the “add to blogger” link and every time i try to add the widget (it takes me to my blogger page to confirm that I want to add the widget), i get an error message which I can’t even read fully because it closes the page completely so quick. any suggestions would be greatly appreciated! thank you!

      1. I am having this issue as well. Every time I try to add the widget with the slides to blogger an error msg appears, saying that the edit content field needs to be filled out. I don’t know what is supposed to be in there. Is it the jquery code we generated in step one? Thanks.

        Janeese recently posted: Too Faced Chocolate Bar Palette
  26. Hi, I was wondering if it is possible to make the text in the caption a different color, currently it’s pretty difficult to read clearly.

    1. Sorry but those link to a third party site; I don’t have any control over that. Either their site is down (maintenance, server problems, etc.) or they’re making changes to it.

  27. Understood, just trying to make sure that it is not only me experiencing issues with the Way2Blogging site. Links not working for you either? Great post by the way.

  28. Nivo Slider is working perfectly in Internet Explorer, but simply comes up with a blank ‘loading’ image when using Google Chrome browser. It has been working perfectly in Chrome for weeks up until now.

    I haven’t been able to test the site with other browsers. Do you have any advice for fixing the slider in Google Chrome?

        1. Well here’s the official slider:

          The only problem is that you need a place to put the JavaScript file. You can’t just upload that into Blogger (that I know of…) like you can with WordPress. So you might have to find another hosted version of the JavaScript somewhere, but I’m not sure where that would be. πŸ™

  29. I would remove the slider and re-install, but the Way2Blogging site links are once again not working. Any insight would be much appreciated!

    1. Should do. That is the Nivo Slider script. I’m not sure if it’s the same version, but it’s worth giving it a try.

  30. I linked images (size:original) from “Pages” and everything is working fine, except for the size of images won’t change according to the size of the slider!

    How can I fix this?

  31. Oh no, The requested URL /widget-generators/nivo-slider-script-generator was not found on this server πŸ™ Any other links where I can create a slider??

    1. You’ll need to adjust the image size in a photo editing programme like Photoshop or Canva.

      1. Not working for me. And this is not the first tutorial that i have seen. I uploaded my files in a folder called Slider1 .In that folder i have 2 more folders: data1 and engine1 + 2 more files wowslider & wowslider-iframe.

        I get it: you need to tell the code where to get the files from (images,jquery,index page etc)

        I made the Slider1 Public folder. I toked the link and replaced it everywhere.
        Example: <img src=";
        Where: is the link with the Slider1 that contains all the other things.
        Than you edit the Template Blogger in HTML. You add to the head and then to the body section.
        The only part left is to tell where to position this wonderful slider. That's where the iFrame comes in. I did not bother ,cuz the slider was not working anyways.
        And i did the test.No surprise its not working. If we take the image link that i placed here….it says Page not found error 404. As you can see for yourself.
        Here is how my Blog looks like at the bottom of the page you can see the broken slider.

        What em i doing wrong ? Please Ash, i soo need this slider to work!
        I can provide you with any file that you need, to look at …even provide you with the template blogger…Anything.

        yes,forgot to mention. after i finished modifying the src links i reuploaded the wowslider (index page) and iFrame to the GoogleDrive folder again. As they should be.

  32. This is fantastic!! Thank you! Is there any way to remove the “Prev” “Next” buttons? And the slide numbers at the bottom? I just want to have the slider without those buttons.

    Thank you!

  33. Thank you very much for your work , I would like to ask you about the slide show on blogger I follow all the instruction you said and I get nice slide show in my blog but the problem that happened to me was the appearance of slide show on all pages in fact I need it only in the main pages my question is how can I keep slide show appear on main page only?

  34. Thanks Ashley,
    Nice article, I am loving it , like Jennifer says even i might fall in love with you..
    Hope you set an example for all the women who are sitting idle and can learn from you. πŸ™‚

    God Bless you..

  35. This worked wonderfully, so thank you! I’m wondering if you know how to not show the navigation words (i.e. “Prev” & “Next”) or the tabs at the bottom (“1,2, etc. depending on number of slides). I literally only want to show the images with no labels or anything. If you have time to help, I’d appreciate it. πŸ™‚

  36. Hi Ashley , You are the best ! Great tutorial ! this is exactly what i have been looking for. i have tried it on my test blog it working perfectly .I am yet to try it on my real blog because on the mobile view of my test blog it is not working . I have tried using this “mobile=’yes'” ,it is still not working . please how an i make it work when viewed from mobile phones.

    tea recently posted: hhhhhhhkkj
  37. Hi Ashley great tutorial I got the slider, the pictures eveything but I keep getting a 404 error please please please help

  38. I’ve just spent the best part of 2 hours trying to set up an image slider on my blog. I’ve been through about 10 different websites with different codes and none of them worked!!
    And then I found you. Your code actually works.
    I think I want to marry you.

  39. Appreciating the commitment you put into your blog and
    in depth information you present. It’s great to come across a blog every once in a
    while that isn’t the same outdated rehashed material.

    Excellent read! I’ve saved your site and I’m adding your
    RSS feeds to my Google account.

  40. Everything is right, thanks for sharing. But the actual problem is to add about the image url link in code and how can be get it in blogger.

    Waiting for response. πŸ™‚

  41. Hi! Since the slider didn’t work on my blog after following all the steps so I decided to take it off but something happened… When I tried to remove the step 1 gadget a 404 error message popped up instead of the script… At the end I refreshed the layaout page and the gadget desappeared and I deleted everything from my HTML but the slider bar in the bottom of my blog did not go away…. My blog looks bad this way, what can I do?

  42. Love it! I got everything to work perfect the first time! I was wondering if there is a way to change the 123 under the pictures or to delete it altogether? Also, is there a way to change the prev and next buttons to arrows? Thanks!

  43. Do you mind if I quote a couple of your articles as long as I provide credit and
    sources back to your blog? My blog is in the exact same niche as yours and my users would really benefit from some of the information you provide here.
    Please let me know if this okay with you. Regards!

Recent Posts

    Random Posts