How To Change The Header To Add An Image In Blogger

If you have WordPress blog you are probably familiar with how customizable it is but when working with Blogger, you may not know that you can customize the templates and headers to suit your needs. I have listed the instructions below. If you need help with WordPress let me know.

Before you change the code make sure to back up the current template in case you accidentally do something wrong then you can upload the backed up template easily. Do this, especially is you are new to code.

Click Backup/Remove



Then click Download and save the file where can find it if needed. That’s it. You don’t need to upload it again unless you make a mistake.


This is not difficult if you take it step by step.

Step 1. Log in to your blogger account and this will take you to the dashboard.
Step 2. Click on the blog that you want to edit


Step 3. Click on Template then you can edit or change the template from here.










Step 4. Click on Edit HTML








Step 5. Click anywhere in the box and hit the control (ctrl) and the F key at the same time to open a search box within the code. Make sure you do not delete anything and only open a box like you see below.







Step 6. Search for the following term:

<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>

This code tells your blog how many widgets you can add and the default is ‘1’. Change this to add more widgets like a header image. You can start with 2 or 3 you don’t want to go crazy. Next, you want to change the ‘no’ to ‘yes’.

In order for this to work you will probably also have to locate the code that looks like:

<b:widget id=’Header1′ locked=’true’ title=’Header (Header)’ type=’Header’/>

and change the locked attribute from ‘true’ to ‘false’. That should do it. Save the template and go to the layout tab.

You can remove and replace the  current header or rearrange them there if you like.



Leave a Reply

Skip to toolbar