Tauni Everett

Celebrate Every Day

Tauni Everett » Business + Productivity » Blogging » Blogger » How To Make an Image Slider in Blogger

How To Make an Image Slider in Blogger

Snap1

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

Screen shot 2012 11 10 at 1 39 42 pm

#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”

Screen shot 2012 11 10 at 1 44 53 pm

Copy the Direct Link

Screen shot 2012 11 10 at 1 48 40 pm

#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)

Slide copy

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

More ideas like this...

Comments

    • Tauni says

      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

      Reply

Leave a Reply

%d bloggers like this:
Read previous post:
Thanksgiving 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