9 (Quick) steps to add Header Image in Blogger

How to add Header Image in Blogger


Adding Header Images in Google Blogger is one of the easiest tasks to do, mostly all blogger templates are capable of adding a custom header image.

The Blogger Header Image is the image at the top of the blog which represents the blog's brand and tells visitors what's the blog is about in short. Headers Images in websites are usually the logo of those websites.


Every blogger enjoys adding their header image to their website because that image will tell stories to the visitors that the author's description does with words.

So in this blog post, I will be explaining "How to add Header Image in Blogger".

But before that, users have to pick the right dimensions for their custom header image depending upon your blogger theme because the inappropriate size will make the blogger "shrink to fit" your header image.

How to add Blogger Header Image


  1. Login to your blogger account.


  2. Select "Layout" from the left navigation panel.


  3. Fig 1


  4. Click on the "Edit" button of the "Header" (Header logo) menu on the main page.


  5. Fig 2


  6. From the following "Configure Header" popup box, tick the "Show Page Header" box to make the header image visible for the users.

    You can also edit your blog's Title and Description from that box itself.


  7. Fig 3


  8. In the placement menu, you can select the display properties of your blogger header image.

    You can add the Header image "Behind title and description", "Instead of title and description" and "Have description placed after the image". For better visual select "Instead of title and description".


  9. You can upload the header image from your computer or by pasting the image URL from the web.


  10. If your image is in the correct dimensions then uncheck the "shrink to fit".


  11. Now select the "Save" button to upload your Blogger Header image.


  12. Now on the main page, select "Preview" (eye icon) from the bottom right corner to see the preview of the added Header image. If you're okay with the added blogger header then click save "Save" (save icon) to save the header image on your Blogspot blog.



Fig 4


 Thus this how to change Blogger Header Image.

If you want to learn this method in a video format or want to see how it's working, watch the following YouTube tutorial.




Tips to Upload Blogger Header Image


  • Create your custom header image in the appropriate size depending upon your website theme, the most default size of the blogger header image size is 960 pixels wide, and some themes have 1600 pixels wide, 600 pixels wide & 150 pixels wide.


  • If your header image is larger than your template's default size, the blogger will automatically crop it down to the default size.


  • To upload your logo (transparent) as a blogger header then I recommend you to save that file as ".png" rather than ".jpg".


  • Choose your Header image color wisely depending upon your website's background color.

 

Read "9 [Easy] steps to Customize Blogger Template" to know how to customize the blogger template to optimize your header image.

 

  • Use a high-quality compressed image as your blogger header because the lower the file size is, the faster it loads. For this we recommend you to use "Short Pixel" image compression to compress your images without loss of quality of the image.


Thus these are some major tips regarding add header images in Blogspot.


Conclusion


I think I have given a clear explanation on how to upload, add, or change their blogger header image.

I hope you find this blog post helpful.

Please comment on your thoughts about this blog post and about my website.


If you want to learn more about Blogging, SEO and YouTube then I suggest you guys check out my following articles.





Stay connected with this website to receive tips about Blogging.


If you like this article, please share it to help other others who are all struggling with this same problem that you're facing, and after all,


Sharing is Caring.


Thank you, Have a nice day.

Post a Comment

0 Comments