And check out these textures by Jerry! Jerry, I don't know how you do it, but you continue to amaze and delight me. :-)
As promised, today I am going to post something technical. :) I get so many emails asking me how I make slideshow headers.
Well, it is easy; if you follow this tutorial. I have done so much research trying to figure out the best way to do this without giving myself (or you, my reader) a headache.
NOTE: If your slideshow header is not centered correctly, please try this tip from one of my readers: "All you have to do is put this code in CSS: #HTML1 {margin-left:-40px} You may have to play with the number before" px" depending on the width of your blog but that should work."
By the way, I have a growing list of Blogger and blog tutorials. You can find them on the bottom of this page or click here to see all of my posts.
1. Make your "slides" the width of your blog header. I use Photoshop or Photoshop Elements. I have some free blank templates here. If you don't know how big you need to make your slideshow header, go to Page Elements, then click on "Edit" where you upload your header and look where it says "shrink to size" and copy that width. Or go to your template html and scroll down to Header Wrapper and copy that size. Them make your header that width and any height you choose. I usually go for 300 to 350px high but you can make them as large/small as you want. Make sure all of the slides are the exact same height and width or the slideshow won't work.
Here are the two lovely slides I made. They are 800px wide, 300px high. Remember, the more slides you add the slower your blog will load, so I usually try to stick with 2-5 slides.
Upload your slides to your favorite image hosting site. I use free and wonderful TinyPic. Grab the direct link URL (circled here).
Now for the fun part! Go to HTML Basix. This is free and makes creating slides very simple. I was so excited when a few readers pointed this site out for me when I was on my quest to make a slideshow header. Click on Automatically refresh images and put in how often you want them to flash (every 6 seconds here). Click on same page (loop) and put in the slide's width and height in px. Then paste in the URL of each image where I put a little arrow. You can also put the URL of your blog in URL of link so if someone clicks on your slides they will be directed to your Home.
Click on Generate when you are done.
Now you will see your Banner Rotator Code. Simple click on Select All and copy that code. You will paste this in Blogger.
Once you copy the code, go to Blogger, Layout, Page Elements. Then go to the top and click on Add a Gadget (by your header gadget) and select "HTML/Javascript". Paste the code there and Save.
Once you do this you will see you have a nice little slideshow header!
However, you will still have your original static header. You can make a small static header on top or bottom of your slideshow header. Or you can remove your top header using the header gadget.
You will also want to remove the borders around your top header. Go to your template html (Layout, Edit Html), back up your template, and then page down to your header html and change the 2 borders seen in the image below to zero. Save your template.
Hope this made sense! I am so excited to finally post this tutorial. And I have many more Blogger UnWrapped tutorials coming, not to mention more free actions, editing and photography tutorials, and Coffee with Morgan!
If you have any questions, post them at the CoffeeShop Flickr Group!
I also wanted to thank all of you for visiting CoffeeShop. Thank you for reading my blog, posting great comments, sending your friends over here, and your generous donations! I am almost at 300 posts and I am still having a great time and still going strong. :-)
