Session #3: Design - Adding a Custom Header

It's time to add a new header to your blog! You've already created your blog and added a background. Now, if you want, it's time to add your own personal header. You can just leave the header that is created by default, but you'd be way cooler if you made your own. The instructions below are not the only way to do this...but this is what I've found to be easiest.

What sites to you need to use?

1. Open PicMonkey. You don't have to be signed up or log in. It's free to use as is. There are several options within the site that will be blocked unless you sign up and pay a fee, but I've found that everything you need is in the free version.

2. Open Photobucket. You do need to login to this site. You can login with your Facebook or Twitter account, or just sign up - all for free. 

3. Open your blog, go to the dashboard, click on "Template" on the left, and click on "Customize" on the right. You'll need this later. 

How do I make a header?

3. To begin creating your custom header, you will  need to have a picture saved to your computer. This could be a picture that you actually want to include as your header, or just a random one. It really doesn't matter either way. I use any old random picture and end of covering the whole thing up, so that's how I'll proceed.

4. In PicMonkey, click where it says "Edit a Photo", and select the picture you want to start with. This will pull the picture up, and show you your editing tools on the left. 

5. Resize your picture to fit into your blog header. This is where you'll need to go back to #3 above. If you look on that page of your blog, you'll see the customizing editing window at the top. Click on "Adjust Widths". Look at the very top and find where is says "Entire Blog". You'll see a long bar with a number next to it. Mine says 990px. Write this number down if you are forgetful.

6. Now go back to PicMonkey. and click on "Resize". If the width from your blog was 990px, then you want your picture's width to be 980px or so. This will leave a little room on the outside of your header (which looks nice). Uncheck the 'Keep proportions" box, and change the height to 200px.. Now your picture is the perfect size.
7. Now..the fun part...use the PicMonkey tools to create your perfect header. You can add a rectangular shape over top of the entire picture to start from scratch, add text other pictures, shapes, designs...etc. Go wild. 
8. Click "Save" and save your new picture to your computer.


How do I get this new header onto my blog?
 9. Go back to Photobucket.
10. Click "Upload" to put your new PicMonkey picture into photobucket.
11. Click the chain link icon and copy the "Direct Link" code. 
12. Go back to your blog dashboard and click "Layout".
13. Look for the section that shows your blog title (Header), and click the 'Edit" link. 
14.  Select the circle that says "From the web. Paste an image url below. Then paste the url that you copied from photobucket into the box. You should see it load and then appear!
15. Select the circle that says "Instead of title and description".
16. Click "Save".

To center your blog header, click on "Design", "Custominze", and scroll down to 'Add CSS". Then paste this simple code into the box. 

 #header-inner img {
margin-left: auto;
margin-right: auto;

You should immediately see your header center to the page. Click "Apply" and you are done!
  That's it! It looks like a lot...but you basically create it in PicMonkey, get your code from PhotoBucket, and paste it into your blog. Once you do it you'll see how EASY it really is! I'd love to hear from anyone that does this - let me know your thoughts!
Good luck!