Make a Slideshow Header

For today, here is one of my favorite secrets, the slideshow header! It is especially nice to have for those of you who have photography blogs!

There are a lot of ways to make a slideshow header, but many of them have limits. You can make your own HTML code for your own slideshow header, which requires time and knowledge of HTML. You can even use an image hosting website's option to make a slideshow and copy the code that they give you, but this limits you on customization for size, etc. With so many limits, this way stands out to me as the quickest and easiest ways to make a custom slideshow banner. All thanks to the HTML Basix site! 

This is what you will need to do:

1. Make your images. 

Start by making a header for your blog. Make it just like you would if you were making a normal header, size, etc., but plan on coordinating your header with one or more other images the same size as this header to complete your slideshow. Make the other images to go with it. Ours for This & That Creative has just has two images. I made a slideshow for my photography blog as well, and it has more images. HTML Basix will let you use up to 10 images.

If you make too big of a difference between your images, I think it can be a little in-your-face overwhelming to a viewer to have some big thing blinking so drastically. It all depends on what kind of blog you have too. For photography, it might be nice to show completely different images, but make sure that they are blinking through too quickly (HTML Basix gives you an option of how long you want each image to show).

Save these images on your computer, and make sure to take note of the dimensions of your images--you will be prompted to enter these dimensions in somewhere later.

2. Upload your images to an image hosting site. 

I like to use Photobucket, but you can use any image hosting site. After you upload and save your images, you will have access to different options of sharing your images. You will be using your images' direct links.

3. Make your slideshow code. 

Open a new browser window so you can quickly copy your image direct links and paste them in this new web page you will open. Go to HTML Basix, HERE. It will show you something like this:

Enter in your selections exactly like I have entered here, except the only difference should be the width and height of your images, and how long you want each image to show before it changes to the next image.

If you scroll down, you will see this:

Each image will have three boxes you can enter text in for. You will paste in the direct links of each of your images where indicated. If you want an image to go to a certain link when someone clicks on that image, enter that in as well. The only box that you have to enter text in for your slideshow to work is the image url (direct link from image hosting site) for each image.

Click on the box at the bottom that says "Generate". You will see your slideshow code. You can use this code anywhere Blogger lets you enter in HTML/Javascript. For specific instructions on how to use this code for your header, continue to the next step.

4. Make your slideshow into your blog header. 

Go to PAGE ELEMENTS in your DESIGN tab. 

Click on the box that says ADD A GADGET. Select HTML/Javascript and enter in your new slideshow code and save. Now drag that new Gadget you made right underneath your header. 

I have been able to delete the old header before, but some templates won't let you. If it won't let you delete your header, make a simple image with text/embellishments that will coordinate with your slideshow to replace the old header.

Save all your changes, and view your blog. Your slideshow should be there! (It will not show up as a slideshow on preview mode, but should still be working live!)

Enjoy your slideshow!