**NEW** Visit my Gift Shop to see and purchase my favorite things for organizing, self discovery, marriage and parenting!

Blog Button Slideshow Tutorial

I received a question recently about my blog button slideshow, so today I thought I'd take you through my process of showing love to my bloggy link up friends without cluttering up my sidebar.

Why a Slideshow?
Previously, I laid out all the blog buttons for link parties I participate in into one long widget full of buttons.  This made for an extra long web page and lots of eye clutter. In an effort to de-clutter my blog's sidebar, I weighed the different options for displaying buttons-either a buttons page or a slideshow.

Putting blog buttons on their own page felt like wasted page space to me since I only participate in a handful of link parties. Besides that, I wanted to keep pages related to my blog.

Using a slideshow would greatly reduce the size used in the sidebar, and would still display my linky blog buttons proudly without overwhelming the page as a whole.

It was decided. For me, a slideshow was the best way to maximize my sidebar space and still show support for my linky blog sisters.

Rounding Up the Troops
If you're doing this from scratch, you'll want to round up all your linky buttons {that will mean a lot of open internet browser tabs or windows}. If you already have a widget laying out everyone's buttons {like I had previously}, then you're ahead of the game.  Open your widget {leave it open for later} and prepare for plenty of copying and pasting!

Find a Generator
Thanks to ricocheting.com, you can plug your blog link buttons into their Image Slideshow generator so you can generate your own badge slideshow! I happen to come across them by doing a simple google search.

Configure your Settings
First thing to do when creating your slideshow is to configure your settings. From randomization to slideshow control options, you tell the generator how you want your slideshow to work.
Some things to consider:
  • Randomizing will give all your buttons a "fair shot" at displaying themselves proudly instead of showing buttons in the same order every time.  
  • Keep it simple. Placing a transition {which only works in Internet Explorer anyway} could cause a load delay in your page. Forego the fancy here.
  • Controls? That's really up to you. I chose not to, but if you want the link party host to be able to see their button in your slideshow, then include it. But if you have a ton of buttons, it may be rather tedious for a host to scroll through your show.
Add Images
This is where your widget will come in handy. All your copy and paste skills will be needed here.  Copy and paste each buttons information {Image slide URL and blog's link URL} into the form and type in the blog's link party title, then click add.
Tips & Tricks:
  • The Slide URL in each segment of code is enclosed in quotes after img scr="..."
  • The Link URL in each segment of code is enclosed in quotes after href="...''
  • Scroll down past each segment of code to keep your place and avoid duplicate slides
  • Use keyboard shortcuts to make the task go faster
    • alt + tab to go back and forth between windows 
    • ctrl + c to copy
    • ctrl + v to paste
Generate Your Code
Once all of your images are safely added to your slideshow, just click generate!
Copy & Paste
Once you've got your code ready to go, just copy and paste it into your widget. If you're sure you've done it right, you can replace the code in the widget that's already open {this cannot be undone once saved}. My recommendation is to start a new HTML widget to plug the code into and test it out before deleting the long widget.
Making Modifications
After all the copying and pasting was done, I noticed some annoyances. First, because everyone sizes their buttons differently, some images got cut off. Second, because some images may have different heights, it moves my whole sidebar up and down each time it scrolls through...annoying! Third, I noticed that the slideshow was not centered on my widget which is also annoying.

These annoyances are easily fixed by making some minor modifications to the code. {insert courage here}. I will tackle each annoyance in order of difficulty {easy to difficult}.

To center the slideshow in the widget insert <center> to the very beginning, and </center> to the very end.
Notice how I gave myself some extra room at the top, and then tagged the closing code to the very end of the code.

To adjust the images to be all the same width, insert the width adjustment to the slideshow code.
Notice where I placed the addition. Look for the segment that starts with <!--slide show HTML-->. The width I chose was 175px {written exactly as, width="175px"}. Your width may be different, so adjust to your sidebar.
To keep the widget height from constantly adjusting, simply add this piece of code to the beginning.
Notice: I simply added it right after my center alignment code. The adjustment I made to the box is written exactly as <div style="height: 200px">. You may also need to adjust the number here to your liking.
Pat Yourself on the Back
You did it! Now you can sit back, smile and gawk at your new fancy schmancy slideshow! Observe:






I hope that this tutorial has helped you to de-clutter your sidebar. I'm no coding expert by any means, but I did what little I know and it worked for me. If there are any pro status techies out there, I'd love to know what other methods you have used to add a slideshow to your sidebar.

Did this tutorial give you some courage to take on this project for your blog? Do you use a different slideshow? Share!
Related Posts Plugin for WordPress, Blogger...