Tuesday, February 06, 2007

customizing your blog

Clarence of Can You Hear Me Now? suggested in a comment that I explain how to put a banner in the header of a blog. I'll attempt to do this now: I'm familiar with Blogger or Blogspot, but I think Clarence, who uses Typepad, will be able to translate these instructions over to his own page editor. One important note: Before you attempt to change the html on your template you should save a copy of the template on notepad, just in case you make a serious mistake. You will be able to restore the old template from the saved file.

Getting the Image


  1. Decide what image or photo you want in your banner. I always use my own photos, but there are images on the net that are in the public domain. (Don't use copyrighted images) Or you can create an image using a program like, Paint, Photoshop, etc. I use Photoshop to tailor my images to the size I want. The image file should be jpg., jpeg. or gif.
  2. Once you decide on the image it must be sized to fit your browser. My banner is 750 pixels wide. This fits good on my browser and it should look good on most of the browsers of the readers of your blog. Use your photo editing program to crop the picture into a horizontal strip about 750 pixels wide and about 260 pixels high. This will be about 10.4 inches wide and 3 inches high. That should be easily seen on most computer monitor screens.
  3. Once your banner is ready you'll need to find a website that will host your image. I use Flickr.com. As soon as you upload the picture to the site you can obtain the necessary html to copy and paste into your template.

Ok. So now you have created the image/photo you want as your banner, sized it, saved it as a jpg, jpeg, or gif, uploaded it to a hosting service, and now your ready to put it on your blog.

Getting the new banner on your blog header

These instructions are for those who have switched to the new blogger. If you still have the old template you can put a new banner up but it takes more intricate changes to the template than decribed here. If you want to customize the look of your blog it will be easier with the new version. My friends and family think I'm computer savvy, but I'm not really. I'm just good at finding out who is savvy and getting the knowledge from them. I found the following instructions on A Hoosier Family and used them to change the banner on my blog:

  1. Go to your dasboard and click "layout".
  2. Click on "Edit HTML".
  3. Make sure "Expand Widget" box is unchecked.
  4. In the edit template field scroll down to the header code. div id="header-wrapper". Under the header code you will see code that says maxwidgets. Switch the 1 to a 2.
  5. Nearby will be a code for showaddelement. Change the no to yes.
  6. SAVE TEMPLATE

Now go back to Page Elements. There will now be an additional "Add Page Element" section in the header area. Click on it.

  1. In the Add Element section click on the HTML/Javascript.
  2. Open your photo hosting site. (Flickr)(in a new window)
  3. Copy your photo's url html and paste it into the appropriate HTML/Javascript box.
  4. Save changes.

Now go back to the Edit HTML tab in Layout and check that "Expand Widget" box is still unchecked.

  1. Scroll down the template html until you find the code that says: "Header1" locked="true" title="Title of your Blog (header)"
  2. Change true to false
  3. Save
  4. Click on edit in the previously existing page element (the old header) Click remove or delete.
  5. Save

Your blog should now have a new look.

Clarence, your banner would be changed in basically the same way. Since I don't use Typepad I'm unfamiliar with the "language" they use. Here is a url to get you started: Typepad Banner

1 comment:

Dawn said...

Very handy instructions. If I ever find a picture suitable to represent my blog, I now know how to post it!