How To Make an Image Slider in Blogger

Today we are going to learn how to do something really fun! WordPress users have the options to install plugins and create featured images slides show on their blog. This is not a standard widget that is available as a Blogger user, BUT today I am going to show you how to make an image slider in Blogger.

* The original code I am going to show you to make this can be found at Helper Blogger.*

How to make an Image Slider in Blogger

#1. The first step is to actually create the slides that you want in your image slider. Choose a size and make 3-5 slides all the same dimensions. In the example (click to see a live preview) I am using today, the slides are 700px wide by 218px tall.

So create your slides. You can re-size photos or you can create a image with photos or text.

#2. Once you have your 5 slides created upload them to photobucket. Leave your photobucket account open and start another internet tab.

#3. Open up blogger. Go to your layout page and click “add a widget”.

#4. Copy this code into your new HTML/Java Script Widget :: (I know it is long. I promise it isn’t scary!)

To copy put cursor at the beginning of the code and drag all the way to the end. (I know some of the text is running outside the box, don’t worry everything will still get copied.)

<style type="text/css">
/* JavaScript Image Slider By http://www.helperblogger.com/ */
#mcis { display: none; }
#sliderFrame {
position: relative; width: 700px; margin: 0 auto; border:5px solid #f5f5f5; }
#ribbon {
width: 111px; height: 111px; position: absolute; top: -4px; left: -4px;
background: url(http://i904.photobucket.com/albums/ac241/kelimedesign/banner.png) no-repeat;
z-index: 7; }
#slider { width: 700px; height: 218px;
background: #fff url(http://3.bp.blogspot.com/-5y0QxGG9wcM/T_2NFVukvgI/AAAAAAAACjg/lgnDtn_n-7w/s1600/helperblogger.com-loading.gif) no-repeat 50% 50%;
position: relative; margin: 0 auto; box-shadow: 0px 1px 5px #999999; }
#slider img { position: absolute; border: none; display: none; }
#slider a.imgLink { z-index: 2; display: none;
position: absolute; top: 0px; left: 0px; border: 0; padding: 0; margin: 0;
width: 100%; height: 100%; }
div.mc-caption-bg, div.mc-caption-bg2 {
position: absolute; width: 100%; height: auto;
padding: 0; left: 0px; bottom: 0px; z-index: 3; overflow: hidden; font-size: 0; }
div.mc-caption-bg { background-color: black; }
div.mc-caption { font: bold 14px/20px Arial;
color: #EEE; z-index: 4; padding: 10px 0; text-align: center; }
div.mc-caption a { color: #FB0; }
div.mc-caption a:hover { color: #DA0; }
div.navBulletsWrapper { top: 250px; left: 190px;
width: 150px; background: none; padding-left: 20px; position: relative; z-index: 5; cursor: pointer; }
div.navBulletsWrapper div {
width: 11px; height: 11px;
background: transparent url(http://3.bp.blogspot.com/-G-iekYUr83U/T_2NEluoaDI/AAAAAAAACjY/TR1wfeuaO_k/s1600/helperblogger.com-bullet.png) no-repeat 0 0;
float: left; overflow: hidden; vertical-align: middle;
cursor: pointer; margin-right: 11px; _position: relative; }
div.navBulletsWrapper div.active { background-position: 0 -11px; }
#slider { transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0);
 -moz-transform: translate3d(0,0,0); -o-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); } </style>
<script src="http://code.helperblogger.com/js-image-slider.js" type="text/javascript"></script>
<div id="sliderFrame"> <div id="ribbon"></div> <div id="slider">
<a href="http://www.thecardswedrew.com/2012/10/diy-halloween-party-serving-set.htm">
<img src="http://i904.photobucket.com/albums/ac241/kelimedesign/halloweenmug.jpg" alt="Halloween Mug Set"/></a>
<a href="http://www.thecardswedrew.com/2012/10/fall-inspired-tablescape.html">
<img src="http://i904.photobucket.com/albums/ac241/kelimedesign/table.jpg" alt="Fall Tablescape"/></a>
<a href="http://www.thecardswedrew.com/2012/09/easy-fall-centerpiece.html">
<img src="http://i904.photobucket.com/albums/ac241/kelimedesign/fallcenter.jpg" alt="Easy Fall Centerpieces"/></a>
<a href="http://www.thecardswedrew.com/2012/09/candy-corn-mum-planter.html">
<img src="http://i904.photobucket.com/albums/ac241/kelimedesign/candycorn.jpg" alt="Candy Corn Mum Planter"/></a>
<a href="http://www.thecardswedrew.com/2012/09/fall-corn-husk-bow-wreath.html">
<img src="http://i904.photobucket.com/albums/ac241/kelimedesign/wreath.jpg" alt="Fall Rosette Wreath"/></a> </div></div>

#5. Go back to your Photobucket account. Copy the Direct Link URL for your first slide.

Hover over the photo > Click “Get Media Links”

Copy the Direct Link

#6. Now GO Back Over to Your Blogger Widget >>>

Scroll down to the very bottom of the slider code….  You will see code that looks like this. >>>

Replace the BLUE parts with the Direct Image URLS (from photobucket)  And Replace all the ORANGE parts with your post URLS. Replace all the PINK parts with the Slide Title (the words you want to appear on the slide)

SAVE! And ta-da! Now you have your very own Image Slider in Blogger! 

 

Kendra @ Key Lime Digital Designs

Kendra @ Key Lime Digital Designs

Kendra is a wife and mom, based in Hawaii. She specializes in digital website design. Pick up additional web design tips and check out her design skills at Key Lime Digital Designs.
Kendra @ Key Lime Digital Designs
Kendra @ Key Lime Digital Designs
Kendra @ Key Lime Digital Designs

Latest posts by Kendra @ Key Lime Digital Designs (see all)

Comments

  1. Woohoo! Doing this now! Thank you Kendra!!

  2. I am SUPER DUPER Jumping over here!! THANK YOU SOOOOO MUCH YAY YAY & YAY thank you so much..

  3. Thanks for this – I have been wondering how to do it and haven’t bothered to look it up yet.

    • Melissa, isn’t this a great tutorial? I love the slider on my site. It was one of the things that inspired me to move to WordPress a couple of years ago…I love that Blogger is becoming more flexible. xoxo, Tauni

  4. Can you give us a link to a blog with the slider so we know what we should be trying to recreate and where it appears etc…

  5. Thank you so much for this tutorial! I have been wanting to do this forever! I can’t wait to try it.

  6. i have implemented this code to my blog, however al li see is three flashing boxes in the middle?

Leave a Reply

Read previous post:
Fall mantel
Thanksgiving Mantel

Fall decorating is always a bit interesting around here...In late September when Layla is posting her amazing fall mantel and Kate...

Close