Monday, October 18, 2010

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!

14 comments:

  1. Great tutorial, thank you for sharing! I have been looking for exactly this information to do the header on my blog. :) I will let you know how it goes once I have tried it. Have a great week!
    Hugs,
    Victoria

    ReplyDelete
  2. Thank you :) this was much easier to understand that all that coding on other sites.

    IT worked very well ^^

    ReplyDelete
  3. O.K....if I was able to do this then ANYONE can do this! Thank you so much for the fabulous tutorial!

    ReplyDelete
  4. this was awesome! thank you so much1

    ReplyDelete
  5. Thank you so much!! my blog http://analiapalmerphotography.blogspot.com/ I now need to learn how to get rid of the white on the side of the header and center it!

    ReplyDelete
  6. I wanted to thank you for most of the tips you provided, made my day easier. Thank you. My blog is: msseelauj.blogspot.com

    ReplyDelete
  7. Thanks for the code! It works great (apart from the image for some reason being a bit off to the right). Is there any way at all to make the Header text appear over the slideshow widget (without creating a huge gap)? Or should I be looking for another way to solve this?

    I'm planning to regularly change around my pictures in the future and would like to keep the same header without having to photoshop it into the images each time (ravalation.blogspot.com).

    ReplyDelete
  8. Thank You, this is very helpful and worked well on my blog!! :)

    ReplyDelete
  9. Nice and great sharing. I think it will help me.

    ReplyDelete
  10. http://smshousepk.com/chat-room/ Live Chat Room Nd Real Dattning Grils Chat ROom nd real Dattning Girls Mobile Number

    WwW,SmSHousePk.Com Free Live Chat Room, Latest Englis Sms, Real Girls Sex Mobile NUmber For Dattning

    ReplyDelete
  11. I use flickr and for some reason it comes up as undefined. Is there any suggestions?

    ReplyDelete

Thanks for stopping by and taking the time to read our blog! We love comments :)

LinkWithin

Related Posts with Thumbnails