Skip to main content

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!! 🙂Kaina
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="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></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="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/jquery.nivo.slider.min.js"></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() {
    $('#ng-nivoslider').nivoSlider();
});
</script>
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:
</head>
Again, it should be very near the top.
Then, paste this directly above it:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-nivoslider/3.2/nivo-slider.min.css" 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>
 
</div>
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="https://www.nosegraze.com/black-city-by-elizabeth-richards/"><img src="https://www.nosegraze.com/wp-content/uploads/2012/11/black-city-graphic-step-6.jpg" alt="Black City by Elizabeth Richards" /></a>
 <a href="https://www.nosegraze.com/beautiful-disaster-by-jamie-mcguire/"><img src="https://www.nosegraze.com/wp-content/uploads/2012/08/beautiful-disaster-exception.jpg" alt="Beautiful Disaster by Jamie McGuire" /></a>
 
</div>
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="https://www.nosegraze.com/black-city-by-elizabeth-richards/"><img src="https://www.nosegraze.com/wp-content/uploads/2012/11/black-city-graphic-step-6.jpg" 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:
</div>
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 27 year old California girl living in England (I fell in love with a Brit!). I like to inject a little #girlpower into the WordPress development community by teaching

Comments

Popular posts from this blog

》¡》》》¡》 NAVIGATE Want To Spend More Time On Your Writing And Tired Of Doing It All? A Virtual Assistant Can Help Alexandra Amor Sometimes you need specific help for your situation Indie authors often have an edge of control freakery … well, I do! I like being in control and I enjoy pretty much all aspects of being an author entrepreneur. But I hit a wall about 18 months ago, and I definitely needed some help, so I started looking for a virtual assistant to help me. I had a few varied experiences and learned some lessons, and then  Alexandra Amor reached out to me with some brilliant suggestions for how she could help. Alexandra is a children's author, but she is also a fantastic virtual assistant for me and a number of other authors. I trust her to help me with key tasks in my author business, and she even suggests things that I may not have thought of. Alexandra Amor Today, Alexandra explains how a VA can help authors. Joanna has previously...
When we have excerpts or chapter reveals on site I do not like to copy and paste that long doc into a post. I have using a Google Embedder but it can get annoying and glitchy. Is there anyway to add a scrolling text box to posts? Juliana Hi Juliana! This is absolutely possible.   And luckily, it’s super easy to do! Here’s a preview of what we’ll be creating: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus non finibus tortor, sed ullamcorper massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Integer nulla lacus, maximus at tristique et, accumsan eget metus. Suspendisse arcu nisl, malesuada sit amet ante et, auctor porttitor nisl. Ut dictum leo metus, ac accumsan sem volutpat ac. Nulla leo eros, ultrices quis gravida id, rutrum at enim. Nam et volutpat nunc. Phasellus eu mollis nisl. Aliquam eget scelerisque ex, in dapibus nibh. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse mollis s...