How to find out and change the size of your blog's header image?

Blogger header image gives the uniqueness of your blog among the millions of blogs. So, it's good to use the header image. But you can't use the image as too big or too small. If you do that it looks odd. So, before doing it, you need to know the size of the image that fit for your blog. In this post, I will try to give you the way for finding the image size that fits for your blog.

No technical knowledge is required. Just follow the instructions.

Steps to find out blog's header image size and customizing image layout:

1. Log in to your blogger account from www.blogger.com
   
2. After successful logged in, go to Dashboard > Layout.
   
3. When you clicked Layout, you will see your blogger layout. Now, select Edit HTML option and you will see a new window appeared with some code.
   
4. Click on the Expand Widget Templates.
   
5. Find out the following code segment and look the red colored line. This line represents the width of the header to use the image. For example, "width: 600px;" means that the header could contain a picture which has at most 660px. If your template has margin, padding then the image width should be decreased. Better, to use a image which has smaller width that it mentions. So, always try to subtract 10px to 30px value than the width value provides. In this case, width is 600px. So, if you use a picture (600px - 10px)=590px, the image will be fitted for your blog.

   #header-wrapper { width:660px; margin:0 auto 10px; border:1px solid $bordercolor; }

6. Now find out the following code and give attention to the colored portion:

   expr:height='data:height' expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl' expr:width='data:width'

   Replace the colored part with the following code segment:

   height='590' width='100'

   Put your desired image value according to the value of step 5.
7. At last, click on Save Template.

That's all. By following the above steps you can easily find out your blog's header image size. You can also set up the size of your blog's header image by changing the value of height and width.

If you are enjoyed this post, please consider to leave a comment at the comment section of this page or Subscribe to the feed to get new articles which will be delivered to your feed reader.