CoffeeShop Blogger Tutorial: Customizing the basic Blogger template.

I noticed that some people new to blogging have one of the great free Blogger blogs, but don't know how to customize it. This tutorial will show you how to upload a custom header to your Blogger template and how to change the colors in your blog to match. Check out my first set of free CoffeeShop Blog Headers (used below).

Here is the world's most boring blog. I just set it up to test my headers and practice editing templates without destroying my CoffeeShop Blog. Once you are logged into Blogger, just click on the Customize button on the top blogger menu.

Then select Page Elements from the tab menu. You can see where the header goes on top, and just click on Edit.

The Configure Header box pops up. Select Placement "Instead of title and description" as you are going to upload a custom header that has your title already built in, and also select "Shrink to fit" to make sure your header fits the template. Then select Image "from your computer" and click on the Browse button. Find your header and select it.

Here it is! Click on Save.

Ahhh, that is looking a bit better. But the background is so WHITE, and there is a light gray border around my header that is not centered. We have to go change that.

You want the background to match the header, so open your header in Photoshop Elements or Photoshop, select your eyedropper tool, and click on color you want on your header. In this case I liked the green, and you can see it became my foreground swatch color. Double-click on the foreground swatch and the nifty box seen above will pop up. On the bottom of the right side there is this long number following a "#". Select and copy this. This is the code for that lovely shade of army green.

Now go back to your blog layout and select Fonts and Colors from your top menu. Click on Page Background Color, paste your number on the right side in the "Edit color hex code" space, leaving the "#" that is already there intact. Then press Enter and see your background sample change color on the bottom of your screen!

Now to get rid of that annoying border around your background, select Border Color and once again enter your army green hex code and press Enter. Look at your sample blog on the bottom of your screen and you might find the text looks terrible on your new colored background. Just change the text colors by clicking on the menu on the left to select the text of choice, then either clicking on one of the nifty colored boxes in the middle of the page OR selecting another color from your blog header (in my case the yellow) and entering the hex code on the right.

Once you are satisfied with the colors, just click on Save Changes. If you hate everything click on Clear Edits and start from scratch!

My next blog tutorial post will show you how to upload a free template from Our Blogger Templates so you can have an actual PhotoBlog and also how to post those large images you can't post on the classic Blogger templates. I have also rewritten my Orton Effect with a Contrast Kick Action (it now runs in both Photoshop and Photoshop Elements, is completely adjustable and has a built-in layer mask and a layer to mute the vivid colors of the Orton in portraits) and I will be releasing that this week. I have another texture set coming out, along with my huge set of bracket frames. Then I will be posting more action sets, including my B&W set and some cool arty ones. There have been some late nights at the CoffeeShop, and I think you guys will be pleased!