Blogger Header Image Tricks

Blogger has a great feature that lets you set the title and description of your blog on the top header area. Its at edit layout->page elements. But very often user get in trouble using it, so here are some tricks for resolving some common problems regarding blogger header.

1. Size of header image :
   
   Size of header image should be considered at first place to avoid modification to image at later stage. You can see width of your blog at blogger template designer->adjust widths. Now you can decide, out of that total width of your blog how much you want to give to your header. Basically 900px width and 130px height can be used.


2. Positioning Title and Description :
   
   Many times you will need to change the position of the title and description text. Most of the people in such situations start adjusting spaces in their title text, but this is not the way. By doing this you are changing your blog's TITLE!!! And this leads to poor SEO. Here is a proper way to adjust the text.

• Go to Edit Template HTML.
• For horizontal adjustment, find :
  .header-inner .Header .titlewrapper,
  .header-inner .Header .descriptionwrapper {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 0;
  }
• All the values are set to 0. padding-left is amount of space you want at left of your title and description, padding-right is amount of space at right.
• For Vertical adjustment, find :
  .header-inner .Header .titlewrapper {
    padding-top: $(header.padding.top);
  }
• padding-top is amount of space at top. If we replace above lines with
  .header-inner .Header .titlewrapper {
    padding-top: 0;
  }
  It will eliminate gap between title text and top of the header image. You can adjust value of padding-top according to your requirement.