Making a simple custom header for your blog

3 miles on the schedule today.  Done.  It's been an incredible week to run in Michigan.  Very enjoyable weather.  The outside of my hip is sore.  Jeez - I'm not even marathon training.  Hopefully it will go away with some stretching.  My foot pain is better though.  If it's not one thing, it's another!  Getting old sucks!

----------------

I know that many of you have some completely awesome blogs put together.  This is just my little tid bit on putting together a simple custom header for your blog using a photo that you took.

The first thing you need to do is take a picture of something.  In my case, I typically try to take a picture from a race or while I was running and use that as a theme.  Sometimes I "borrow" pictures from the web but don't really like to do that.

Here the picture that I used for my existing blog header:

Now I took this with a digital SLR camera but really you can use whatever you have as long as the picture is in focus.

After you have the picture picked out, the first thing you need to do is re-size the image to fit the blog header.  There's not really a standard size for the header but I have found through trial and error that the size that seems to work well is 1100 x 390.  In order to resize the photo to this size, I have been using PicMonkey , a free online program to modify pictures.

Once you are at PicMonkey, click on Edit a photo.

It will bring up a list of your files.  Chose the picture file that you want to edit for your blog header.  There are several different edits you can make to the photo.  In this case, because my file size was so large from a DSLR camera, I used Re-Size(at the bottom of the list) first in order to get a bigger part of the photo for the header.  You may or may not have to do that.

I type in change size to: and use 1100 and the rest will be done for you since you want to keep proportions.  Click the green "Apply" button once you are done with re-size.  Once it's resized, you can choose crop(I have put a red arrow so you can see but you will not see the arrow on PicMonkey)

Once you click on Crop, again you can put the proportions of 1100 x 380 in the "actual size"  See below:

You can see once you type in the dimension, it shows a box of what the crop will look like.  Once you have the dimensions in place, you can click on the picture and move the box around exactly where you want it to crop, then click the green "Apply" button and it will crop off the area.  You will be left with what it shows below:

This is the size of the photo you will use for your header.  From there, you will want to customize the photo with words.  In this example, I add "Detroit Runner", "Miles, Marathons & Memories" and I also put on "National Running Day Run - 6/6/12"  In order to do that, click on the letter "P" on the list.  This will bring up all the fonts available under PicMonkey.  See below:

Chose whatever font you want by clicking on the name.  After you have the font chosen, you can add the words at the top just below Text, then click on the green "Add" button.  The text will pop up on the screen.  See below for an example:

Of course, you don't want the size that is above, so you can grab one of the little circles on the corner, click on it and hold it down and pull it to reduce the size to what is right for you.  Once you have the size what you want, release the button and click on the word and move the words wherever you want it on the picture.  See below:

As you can see, I've moved "Detroit Runner" to the top left corner of the photo.  Once the words are where you want it,  you can click outside the photo and the text box closes automatically.  Feel free to add any other words you want.  Here the final picture that I did with everything on it:

Once it's how you want it, you can save the file.  There is a save button on the top of the screen.  A pop up box will come up and you can name the photo whatever you want and click the green, "Save Photo" and save it on your computer.  I usually save mine on the desktop and just delete it once it's on the blog.

Now that you have your final photo, you can insert it on the header.  In order to do that, go into blogger. Once in blogger, click on design.

Click to enlarge

There will be a "header"box at the top that you can click edit.  Once you click edit(see above), it will take you to another screen below, click on "Image from your computer" and chose the file you saved.

Also, make sure that placement says "Instead of title and description".  As you can see, the file of the photo pops up:

Click on Save.  It will take you back to the design page of your blog, then click "View blog" and you should see the header on your blog.

And there you have it, your own custom blog header!

Hope this helps anyone trying to make their blog have a more customized look.

It takes a little time but make your blog look much, much nicer.  Once you do it a few times, it will only take minutes to put this together.  If there are any questions, please feel free to leave a comment.

Have a great day and....Keep Running!!!!