• Business + Productivity
  • Creative Projects
  • Recipes
  • Travel
    • Disneyland
    • Facebook
    • Instagram
    • Pinterest
    • Twitter

Tauni Everett

Bibbidi Bobbidi Chew

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! 

Related Posts

  • Customize Your Favicon in Blogger
  • How To Truncate Posts in Blogger
  • How to Offer A Free Printable in Blogger
  • Blogger or WordPress?
  • Make Your Blog a .COM
  • A New Blogger Feature: Threaded Comments
  • Customize Block Quotes in Blogger
  • A Beginners Guide to Blogger’s Template Designer
about me
post summary
Popular Posts


Snap

Snap

Editor at Tauni Everett
Snap has contributed 472 articles on https://taunieverett.com since October 2, 2012.



Power Bio Box by Zyra Console



You are here:
Home
Business + Productivity
Blogging
How To Make an Image Slider in Blogger
Title:
How To Make an Image Slider in Blogger

Authors:
  • Snap
Categories:
  • Blogger
  • Blogging
Mentions:
Blogger, Blogging Tips, Key Lime Digital Designs

Keywords:
Image slider blogger

Last Updated:
November 14, 2018

  • One Word Goal: The Celebration Shoppe
  • One Word Goal: 30 Minute Crafts
  • Updated! – How to Embed a Pinterest Board on Your Blog
  • How to Offer A Free Printable On Your Blog
  • How to Add Horizontal Featured Posts in Blogger
  • Customize Block Quotes in Blogger
  • Make Your Blog a .COM
  • Add Your Instagram Photos to Your Blogger Sidebar

«
»

Blogger, Blogging 15

Comments

  1. Kelley says

    November 13, 2012 at 7:40 am

    Woohoo! Doing this now! Thank you Kendra!!

    Reply
    • Kendra says

      November 13, 2012 at 10:13 am

      Your welcome! 🙂 Come back and leave a link when your done so we can see it! 🙂

      Reply
      • Vanessa Barker says

        June 8, 2013 at 11:29 pm

        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.

        Reply
        • Tauni says

          June 9, 2013 at 10:22 pm

          Hey Vanessa, there isn’t currently a way to do this in blogger (unless you’re hand coding). Sorry! xoxo, Tauni

          Reply
    • Tauni says

      November 14, 2012 at 6:24 pm

      Kelly, I hope you will share a link when you implement. I would love to see your slider! xoxo, Tauni

      Reply
  2. Ellie Augustin says

    November 13, 2012 at 9:21 am

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

    Reply
    • Tauni says

      November 14, 2012 at 6:23 pm

      You’re super-duper welcome! I am so blessed to work with great contributors like Kendra. xoxo, Tauni

      Reply
  3. Melissa says

    November 13, 2012 at 12:27 pm

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

    Reply
    • Tauni says

      November 14, 2012 at 6:22 pm

      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
  4. Chrissy Farnan says

    November 13, 2012 at 12:49 pm

    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…

    Reply
    • Chrissy Farnan says

      November 13, 2012 at 12:51 pm

      Aaack – Now I see a link to the example :o) I missed that the first read through.

      Reply
      • Tauni says

        November 14, 2012 at 6:21 pm

        Chrissy, Come back and share a link if you implement this on your site! xoxo, Tauni

        Reply
  5. Kelly@ Here Comes the Sun says

    November 13, 2012 at 6:54 pm

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

    Reply
  6. Esskimo says

    September 2, 2013 at 3:39 am

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

    Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recipe Rating




Featured Posts

Petersen Automotive Museum Exterior 3

Petersen Automotive Museum Review: 10 Tips to Enjoying A Trip to One of the Largest Car Museums

Castle Inn and Suites Best Independently Owned and Operated Hotel Close to Disneyland

Castle Inn and Suites Review: Best Locally Owned and Operated Hotel Close to Disneyland

Savor Stone Hearth Pizza and Wine Cherry Bomb

Anaheim’s Savor Stone Hearth Pizza and Wine Review

Anaheim Sheraton Park Hotel Luxury Accomodations Near Disneyland

Sheraton Park Hotel Review: Luxury Hotel Close to Disneyland

WordPress Hosting by House of Ideas

Copyright © 2023 SNAP! Creativity · Design by: Key Lime Digital Designs· Darling Theme