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.

Changing Your Blog's Header Image

You can easily add your favorite image or photo as a blog's header image. You can also add your blog's title and description with your desired image or photo. I appreciate to use your own header image than the image already defined by the blog template designer or just the plain background. Before uploading your own header image, please make sure that the image size will be fit to rest of the header section of your blog. In this page, you will learn how to upload a header image for your blog. It's very simple and easy.

No technical knowledge is required. Just follow the instructions.

Steps of uploading blog's header image:

1. After logging to your blogger account (blogger), go to Dashboard > Layout > Template > Edit HTML. Now, click on Edit option form the Header and you will see a pop up window will be appeared like the following:
   
   
   
2. Form the pop up window, select the method to upload your desired image. You can upload image form your computer by selecting From your computer option. Just give the location of your image. Alternately, you can upload image form the web by selecting Form the web option. In this case, you have to put the url of your desired image.
3. At last, click on Save to save the image. And you have done all!!

Note:

You can display your header image by two ways:

1. Behind title and description: If you select this option, the header image will be located behind your blog's title and description.
2. Instead of title and description: If your header image contains title and description, you can use this option. This option will disable your blog's text title and description. Only the header image will be displayed.

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.