Making an easy custom blog header for Blogger

4 miles on the schedule today.  Did a nice 4 mile tempo run with an average pace under 8 minutes.  It was a bit windy running towards the West but not too bad.  Still a little ice in a few spots but much better than yesterdays wet/sloppy run.

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

I posted something similar to this post last June and thought some of you might be interested to see how this works again.  From my original post, most of you thought it was pretty interesting and I think even some of you may have used this on your blog.  PicMonkey is still available for free although not everything on it is free but you can still do this with the free options.  I hope it helps you with designing your blog or gives you some motivation to start your own blog.

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

I know that many of you have some completely awesome blogs put together.  I would love to have someone professional put together my blog but I just don't want to spend the money to do it.  This is just my little tid bit on putting together a simple custom header for your blog using a photo that you took.  It's a great way to personalize it with something you took a picture of.

The first thing you need to do is take a picture of something - duh!  In my case, I typically try to take a picture from a race or a picture while I was running and use that as a theme.  Next time you are at a race, thing about it so you can get a couple options.  Sometimes I "borrow" pictures from the web but don't really like to do that just like I would not like my photos taken either without my permission.

Here the picture that I used for my current blog header.  I know it does not look like the kind of photo you would want to put on your blog but bear with me on this.

Now I took this with my cheap point and shoot digital camera while at the race but you could use a  digital SLR camera if you really wanted to do something special.

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 (350 to 400).  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 and I usually just use the "auto adjust" to get the color/contrast better.  In this case, because my file size is larger that I want it,  I used Re-Size(at the bottom of the list) first in order to get it the size I want it.

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)

Once you click on Crop, again you can put the proportions of 1100 x 380 in the "actual size"  See below.  Click on the photo below to see it better if needed.

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 is shown 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 and Memories" and I also put on "Super 5k Start(Novi, MI) 2/3/13" so you know where the picture was taken.  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.  Some are not available since they cost money.  After you have the font chosen, you can add the words by clicking the "Add Text".  The text box will pop up on the screen and you can type in what you want.  See below for an example:

Of course, if 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/enlarge 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.

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 using the same process.  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 the drop down menu and click on layout.  See red arrow below.

There will be a "header"box near 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 layout page of your blog, then click "View blog" and you should see the header on your blog like below.

And there you have it, your own custom blog header!  Once you get used to doing this, you can create them pretty quickly.  I usually like to change out mine with different races I've attended or special runs I've gone on and want to share something.  I know that some of you use readers and may never even see the blog header but for those of you that to refer people to the actual blog, it will look professional and customized with very little effort.

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

It takes a little time but makes your blog look much, much nicer.  If there are any questions about the process, please feel free to leave a comment.

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