home about me diy tutorials

July 12, 2011

Make a (Better) Banner for Blogger (Part 3)

In this continuation of "Make a (Better) Banner for Blogger", I will explain the remaining necessary steps to complete the background/banner created in Part 2 if that is all you are wanting.  I do not cover the necessary steps for doing the image map as it appears in my current header.

Creating the Official Banner:
Blogger requires that you have a banner or text, so this requirement will have to be fulfilled.  Also, without the right image to use for the banner, posts and the blog content will cover part of the background just created.

  • Open GIMP and go to File -> New.
  • Adjust the image size.
The width only need to be 1px.
The height needs to be the height of your background (450px) minus 40px (=410px).  In the Simple Template for Blogger, 40px down is where the official banner begins.
  • Open Advanced Options and select "Transparency" for "Fill with".
  • Click OK.


  • Save Image as either a PNG or GIF.



And there you have your official banner...

Tall, thin, and invisible.

Updating Blogger:

  • In the Blogger Dashboard, go to Design -> Page Elements -> Configure Header.
  • Type in the Blog Title.  This will appear on the browser, not the site.
  • Go to Image -> From your computer: -> Browse and upload your invisible official banner image that you just made.
  • Select "Instead of Title and Description".
  • Click OK on the window and SAVE on Page Elements.


  • Go to Template Designer.
  • Select the Simple Template (the all white one).
  • Go to Background and upload the background/banner image you created in Part 2.
  • Select the Top-Middle alignment.
  • Select Don't Tile.
  • Select Scroll with Page.
Click for bigger.

  • If you haven't already adjusted your widths, do so now.
  • Go to Advanced -> Backgrounds.
  • The Main Background and Header Background need to be transparent.
  • Click Apply to Blog and double-check your work.


You're now done!  Congratulations!

If you ran into problems, please let me know!



Stay tuned for the rest of the series for information about the image map!

Make a (Better) Banner for Blogger (Part 1)
Make a (Better) Banner for Blogger (Part 2)
Make a (Better) Banner for Blogger (Part 3)



No comments:

Post a Comment

Every time you leave a comment, an angel gets his wings!