Tuesday, February 17

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!


  1. Thanks Rita. I appreciate your help so much. I would also like to learn out to add separate pg tabs to click on and be able to add photo galleries and such.

    I'm a work in progress. :)

    I did get my first dslr. A canon 10d. So I am so excited and thankful to be giving the world of dslr a try!

    Thank you again for all you do!

    Blessings, Jenn!

  2. I'm so allured with the creativity of a blog but was a bit intimidated on where to start with the "theme". You've helped me so much and I'll definitely be using one of your header templates. Thank You...sounds like you've been so busy!

  3. you are such a creative chick.

    I have tried putting in my sig on the bottom of each post and it did work for a night, then it started showing 'image by flicka not available'. Is there an easier way to add a sig??

    I thought you'd be the chick in the know

  4. Awesome. I'll be using this. Thanks :)

  5. You're awesome as usual Rita.
    I too would like to figure out how to have "page tabs" up on the top so I can categorize things.
    Is that sometime in the future?

  6. My next tutorial will show you how to add the page tabs on top (as you can see on my blog). You have to start with a new template, but it is really easy!

  7. Rita! I loved this... I would have loved this when I was trying to figure my way around how to make up my blog..header... and all the bells and whistles...
    This is such a gift, you know it?

    It is!

    Thankyou for all you do!

  8. YAY! can't wait for the next tutorial! I was so sad that I couldn't figure out the whole xml editor thing! the darn template just wouldn't open!

    thank you for all your hard work!

  9. Thank you So much!! I am SO excited for your next tutorial and can hardly wait! I've been trying to set up a blog and really want to have page tabs too! Thank you for all you do and share!
    ~ Chels

  10. Thank you so much for this tutorial! I had figured out how to successfully add a custom header, but I had no idea that I could change the colors...this is fantastic!

  11. Thank you, thank you! I was able to use your wonderful blog headder and the tutorial on my new blog!!!

    You are a treasure!

  12. Blog is really informative and entertaining same time. I appreciate the efforts made by photo galleries

  13. Thank you! Your blog post will be shared on
    NEW CU Freebies Only Forum
    on Monday July 6th 2009, in this topic: Tutorials Your Place to find Commercial Use Scrap Booking Freebies!
    Forum Owner
    We now have over 1500 members! Migrating to our new forum..... come join us!!!

  14. hi rita,
    i just used this tutorial, and saw that you were going to post a tutorial on how to upload from ourblogger...i was wondering when you would do this post. b/c when i went to their website, i was very confused on how to upload and use these templates! i'm so not computer/blog savey! thanks so much!


  15. Thanks Rita for your wonderful blog. It is filled with so many wonderful things. I successfully was able to load the blog header (green 3 pics blog header) onto my blog that I am slowly creating. What I am having trouble with is how to place a picture into each one fo those frames. Can you help a newbie blogger, please?

  16. This is so great, thank you. I have bean changing my blog by fallowing your tut.
    www.nikitatg-harvey´s cards.blogspott.com


Thank you for taking the time to leave a message, I love reading them! All comments are personally moderated by me and I will post and answer them them as soon as possible.