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!
Kelley says
Woohoo! Doing this now! Thank you Kendra!!
Kendra says
Your welcome! 🙂 Come back and leave a link when your done so we can see it! 🙂
Vanessa Barker says
Kendra, do you know if there is a way to make it transition in a different way? Instead of the slit separation transition? I’d love to just have it slide to the side or from top to bottom.
Tauni says
Hey Vanessa, there isn’t currently a way to do this in blogger (unless you’re hand coding). Sorry! xoxo, Tauni
Tauni says
Kelly, I hope you will share a link when you implement. I would love to see your slider! xoxo, Tauni
Ellie Augustin says
I am SUPER DUPER Jumping over here!! THANK YOU SOOOOO MUCH YAY YAY & YAY thank you so much..
Tauni says
You’re super-duper welcome! I am so blessed to work with great contributors like Kendra. xoxo, Tauni
Melissa says
Thanks for this – I have been wondering how to do it and haven’t bothered to look it up yet.
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
Chrissy Farnan says
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…
Chrissy Farnan says
Aaack – Now I see a link to the example :o) I missed that the first read through.
Tauni says
Chrissy, Come back and share a link if you implement this on your site! xoxo, Tauni
Kelly@ Here Comes the Sun says
Thank you so much for this tutorial! I have been wanting to do this forever! I can’t wait to try it.
Esskimo says
i have implemented this code to my blog, however al li see is three flashing boxes in the middle?