How to change your header image in Blogger

If you are looking for a quick and easy way to give your Blog an update, try changing the Header Image.  The header image replaces the Title and Description of your blog. You can also add a header image that floats under your Title and Description. I'll explain how to do both.

To Add A Header Image that replaces Title and Description:

My new header image was created in Adobe Illustrator. It is 1000px x 230px. Blogger automatically shrunk it to fit the Image Header space (Just click the "Shrink To Fit" option). You can draw these in Picasa or Photo Shop, just about any program that lets you save the image as a .jpg or .png file.

Here is my new one, created on a white rectangular background to get it to fit the space.

To update your Header Image in Blogger Follow these simple steps:

1. Go to Layout section of your Blogger Dashboard

Click Layout Tab in Orange Above.

2. Click on Edit under the Header Tab

Edit Header

3. Configure Header:

Click on Upload File

1.  Upload Image
2. Click "Shrink to fit" Tab before image loads (hurry, this option disappears quick)
3. Click the Instead of Title and Description Button
4. When your image appears hit "Save"
5. Preview the changes and make sure your image looks right
6. You may need to edit your image in your drawing program to get it to fit just right.

To Update Your Header Image to Float under Title and Description:

Follow directions as above but do not click "Instead of Title and Description" Button, instead click the "Behind Title and Description" Button. This will make your header appear something like the following:

I used a simple chalkboard background image that I made in Illustrator. I also changed the font Dancing Script, 80 point and white in the Template Tab on your Dashboard. It would not allow me to change the description font, just the color. You could probably adjust that in CSS but that is much more complicated.{I wrote a post on how to change fonts in Blogger HERE.}

Here is a free downloadable copy of the chalkboard header I used above. Just click the image to enlarge it and "save as".
 

If you are looking for a new header image or need help with creating one, let me know. I can help you with that. I just launched my new Blog Design Website, go check it out Nana Moon Designs. Eventually these 2 blogs will become one.

Happy Blogging! 

Blogging Tip: How To Change Your Fonts in Blogger

Typography is the trend from signs...

Beginning of my winter mantel

... to clothing to websites. It can make your blog stand out. I use different fonts in my Blog Post Title, My Gadget Labels and My Tabs to make these areas pop.

First let's start by breaking down the way Blogger defines each of these text areas. Using the photo above I have labeled each of the following:

1. Tabs Text
2. Gadgets
3. Date Header
4. Post Title
5. Page Text

You can access Blogger fonts by going into to your Blogger Dashboard and click on the TEMPLATE option, from there CUSTOMIZE this will open the Blogger Template Designer click ADVANCED:

1. Tabs Text Blogger gives you the following options to customize the typography here:

1. Font (mine is Molengo)
2. Bold or Italic and Font size (mine is 20)
3. Text Color
4. Selected Color (When you are on the HOME page for instance, the color will be different from the rest of the Tabs Text.)

2. Gadgets are usually in the sidebar and footer but also I have one set above my blog posts. Blogger gives you the following options to customize the typography here:

1. Font (mine is Molengo)
2. Title Color
3. Alternate Color
4. Bold or Italic and Font size (mine is 20px)

3. Date Header Blogger gives you the following options to customize the typography here:

1. Color (Suggestion: Give it a color that is complimentary to the Post Title)
2. Background Color (which highlights the date with a background color. (Rarely used option.)

4. Post Title Blogger gives you the following options to customize the typography here:

1. Font (mine is Neucha)
2. Size
3. Bold or Italic

It does NOT give you an option for color here, instead it is determined by the template color. It usually coordinates with your blog color scheme. You can change this by adding CSS. Make sure your adjust your font size, some of the more fun fonts are by nature small or very large. 

 5. Page Text This defines the text for the body of every blog post. You can also change these when writing a post.

1. Font (Suggestion: Make it readable, not funky this is the main text of your blog you want your readers to be able to read it easily.) (mine is Trebuchet)
2. Color (mine is shade lighter than black #444444. Again go for readable.)
3. Bold or Italic (Suggestion: Do not select bold or italic here, just add those as you write your posts.)
4. Size (mine is 14px)  

I suggest playing around with accent colors, font sizes and various fonts. Beware that some fonts are just not very readable but if used as an accent such as a Gadget Title it adds character. Let me know if you have any questions or if this tutorial was confusing.

Happy Blogging!