How to place a Custom Header banner in Blogger

Most newbies find it hard to upload a custom header banner in blogger blogs. After downloading a template and uploading it to your blog, you might want to change the default header banner of the template and use your own customized header banner. Before you think of doing this,its adviceable you know the width of the header wrapper of your blog.For some default blogger templates,its 650px while the height is 300px. In this tutorial i will show you how to upload it directly instead of first uploading maybe to a free picture site.

Log in to your Dashboard >> Click on Layout >> Page Elements and click on Edit in the header Page Element as shown below :

A box will open like the one shown below :

Then browse the picture from your computer and upload then select from the options under placement, if you want the image banner behind title and description or you want the image banner instead of title and description.

Click on save and you are done.


You may also like How to use customized mobile Template in blogger


If for any reason you could not do it this way, Log in to your dashboard, click on Template, Click on Edit HTML, Click on Format template and look for the code below :

#header-wrapper {
width:660px;
margin:0 auto;
background: url(URL OF YOUR PICTURE) bottom right no-repeat;
height: 300px;
}

Just enter your image banner url inside the bracket, then you can adjust the width or height of the image, I used 660px for width and 300px for height. and then save.

I hope this will help you.

Most newbies find it hard to upload a custom header banner in blogger blogs. After downloading a template and uploading it to your blog, you might want to change the default header banner of the template and use your own customized header banner. Before you think of doing this,its adviceable you know the width of the header wrapper of your blog.For some default blogger templates,its 650px while the height is 300px. In this tutorial i will show you how to upload it directly instead of first uploading maybe to a free picture site.

Log in to your Dashboard >> Click on Layout >> Page Elements and click on Edit in the header Page Element as shown below :

A box will open like the one shown below :

Then browse the picture from your computer and upload then select from the options under placement, if you want the image banner behind title and description or you want the image banner instead of title and description.

Click on save and you are done.


You may also like How to use customized mobile Template in blogger


If for any reason you could not do it this way, Log in to your dashboard, click on Template, Click on Edit HTML, Click on Format template and look for the code below :

#header-wrapper {
width:660px;
margin:0 auto;
background: url(URL OF YOUR PICTURE) bottom right no-repeat;
height: 300px;
}

Just enter your image banner url inside the bracket, then you can adjust the width or height of the image, I used 660px for width and 300px for height. and then save.

I hope this will help you.