Tuesday, January 03, 2006

Making Your Own Banner for Your Blog

I'm going to try to explain this. It is the blind leading the blind. If anyone more computer savvy than me sees errors, please let me know. And don't laugh at me behind my back.

1. Open your desired picture in a photo-editing program like Photoshop orPaint Shop.

2. Resize it to 740 x 150 pixels at 72 dpi. Edit it in any other way you like, with text, etc. Not much text, though. Mine has too much. It's hard to read, I think. Save the edited photo...now your banner...on your hard drive.

3. Create a post in your blog. You will use this to hold your image. Date it sometime far in the future so that it will remain on top and you can find it quickly.

4. Add your banner to the post like you would any other picture.

5. Save your post as a draft. Don'tpublish it.

6. Open up your template. Scan until you find something that looks like this...

<"div id="header">
<"h1 id="blog-title">YOUR BLOG TITLE HERE<"/h1>
<"p id="description">YOUR BLOG DESCRIPTION HERE<"/div>

Yours may not look exactly like this.
You may have more information in there. Also, to keep it from "reading" the code, I needed to add a " in front of each line. Yours definitely won't have that. But that is the general idea of it.

7. Cut from your code what I've highlighted above (your blog title and your blog description). Put them forthe time being in a safe place. Like a word file (don't send it to anyone) or in your notepad.
***Don't just cut them out and get rid of them. Trust me on this. You are going to f*ck this up at least once and I don't want you to come crying to me that you've lost your title. Ok***?

8. Replace the code you removed with this...

<"a href="http://alwaysarousedgirl.blogspot.com/">
<"img src="http://photos1.blogger.com/blogger/7369/1653/1600/Daisies%20for%20border.jpg"alt="" align="middle" border="3" />

9. Obviously, that's my code. So you need to go back and change the first red part to your own blog's address. Also, I had to break my address onto two lines so that it would fit here properly.Your address will all be on one line.

10. Then, go to the post that holds your new banner. Open it. Right-click on the banner and open it in a new window. Copy the address.

11. Go back to the code. See the second part that is red, above? Replace what is there with the address of your picture. Again, it should all be on one line, unlike mine.

11.5 Remove the red quotation marks in front of each line of code.

12. Preview. Are you happy? Happy as a clam? Publish it. Rejoice. Send thoughts of happiness and love and joy to me.

13. Not happy? Hit the "clear edits" button and try try again.

14. If you are paranoid, remove your saved banner from your hard drive.
AlwaysArousedGirl: Con't...Making Your Own Banner for Your Blog
.

No comments: