How to create a photo slider for your blog

If you've been around here for a little while, you've probably seen my blog change time and time again. I use a Blogger blog format, which is FREE!, and I've been really happy with all the available customizations and options on this free format! My sweet friend, Magda, initially helped me fancy up my blog and over the years, I've researched and read and learned just a weeee bit of code to help make my blog the way I want it!





My new favorite thing is the intro photo slider (which you can see at the very top of my blog). I thought about creating a static home page, but in the end, decided to go with a photo slider for now.  It's no surprise that I love photos, so having these initial photos at the top of my blog is just the bees knees. Maybe it's not for everyone, but if you're interested in customizing your blog with a photo slider, just follow these easy-peasy steps!

**Before you start to alter your blog, be sure to back-up your blog just incase anything cray cray happens! Better to be safe than sorry!**

Step 1
Start by determining the width of your blog. Just go to Template-Customizie-Adjust Widths and you will see the width of your blog listed at the top. I don't have any sidebars on my blog (I wanted a more minimalist-looking blog, so I removed what I didn't use and added the rest at the bottom), so my blog is 1090 pixels wide. I size all of my photos at 1000 pixels wide, so I ended up using a 1000x500 pixel photo for my blog slider.

Step 2
Resize your photos to your determined size (mine is 1000x500). I use Picmonkey to resize all of my photos because it's just so darn easy!

Step 3
The next thing you need to do is to upload your photos to a photo sharing site and grab the "direct link" of the photo itself (you'll use this link for the code in a minute). I use TinyPic for my links, but there are a number of different sites you can use!

Step 4 
Now that you have all of your direct links, you'll need to use a Javascript banner code generator to get your blog code. I use HTML Basics and all you have to do is plug in your info and then it spits out the code for you! I've starred the sections below you will need to adjust. So darn easy! Once you're entered all of your photo links and image specifications, click "Generate"to get your unique slider code.

Step 5 
Ok! Now take this code back to your blog and create a new gadget for blog so your slider will show up! Go to the backend of your blog - Layout - and select "Add a gadget" from the layout section of your blog. Select the "HTML/JavaScript" gadget, copy/paste your code into the box and save!

Step 6 
While you're still in the "Layout" section of your blog template, go ahead and move the photo slider to where you want it to appear on your blog. I have mine at the top right under my header. Click "Save arrangement" in the top right hand corner of the page and TA-DA - you have a blog slider!!

Yay! How fun is that? I love customizing my blog and changing things around every now and then! I know blogs are probably a thing of the past, but man, I sure do still love mine! Are you a blog-fan? Or do you have a blog you post to regularly?? What else can I share with you??

Thanks for stopping by, friends!
xo