How to Auto Fix Header Image Height and Width in Blogger

Before I was facing a problem of header image which was not shown perfect in height and width because of blogger settings. Because blogger not provide us any way for resizing header image easily. So after changing its resolution so many time I couldn’t fix my header image. Then I tried to fix it from HTML code and finally I got it and fix it by the changing html code.

 

For Beginners..

• • Avoid Robots to Crawl Archive in Blogger
  • Best Practice to Promote Your Blog/Website
  • Blogger Basics (Tutorial)
  • Complete SEO for Your Blog/Blogspot
  • Fix Duplicate Meta Description Tag 

So in this tutorial I am going to share to different types of tricks for fixing header image height and width without resizing it manually or uploading it again. What I am sharing it’s very easy to use I will guide you here step by step how can we fix header image or resize header image by just replacing such codes or inserting such code and also if your header is setup to display your titles with description over your header image then this trick will not work first of all you have to disable it with following method.
Go to Blogger Dashboard >> Layout
Click on the Header Widget’s Edit button and Setup your setting as per image shown below.

 

How to Auto Resize and Fix Header Image Height and Width

Its time to share the trick for fixing header image width or height. Follow the given below steps.
Go to Blogger Dashboard >> Template >> EDIT Html >>
Find the following

expr:id='data:widget.instanceId + "_headerimg"'expr:src='data:sourceUrl'
expr:width='data:width' style='display: block'/>

and replace the above code with the following code

expr:id='data:widget.instanceId + "_headerimg"' expr:src='data:sourceUrl'
expr:width='data:width' style='display:block; height:auto; width:100%;'/>

If you want to change height and width you can easily change or adjusting by 200% or whatever you want.

Another recommendations 

• • Read More Button in Blogger Post
  • SOME VERY IMPORTANT SEO TIPS
  • Tips to Reduce Loading Time of Blog
  • Ways to Increase Alexa Ranking 

Now Method 2

In the second method we have to insert CSS value for fixing and resizing header image’s width or height. First of all you have to find out the ID of header it will header1 but for making sure yourself you should check it by go to layout and click on Header Edit button and Checkout the address bar as per image shown below.

And now insert the following CSS Script
Blogger Dashboard >> Layout >> Template Designer >> Advanced and Paste the following code to Add Css

#Header1_headerimg{
width: 100%;
height: auto;
}

And Save your template and checkout you Homepage.

Hope you will find this tricks useful. For getting more tips and tricks from us you have to subscribe our daily updates and follow our social media network