How to Add a Custom Top Banner in Blogger

This great question came from Cava. She wanted to know how we put this extra advertisement on the top of our Blogger blog.

By default, Blogger offers you a static blog header including title and description of your blog. Sometimes you might want to add something else on the top of your blog header, like we wanted to add StyleLoving advertisement.

So lets add a new custom header to your blog. This is fairly simple, takes 5 mins max. :)

1. Navigate to your Blogger Dashboard.
2. Click on your Blog Title (in our case Bloggerial).
3. Move on to Template tab from the left pane.

Click Edit HTML button.

Tick on, Expand Widget Templates option.



Now search for following or similar line of code in your template which relates to your blog header section and alter attributes using regarding attribute information indicated.

Maximum Widgets in Header Section

This attribute specifies the maximum number of widgets can be included in header section. The default value is 1. So, by default, you can't add widgets more than one for your header section. By changing this value, you can allow adding more widgets for header section.

i.e: <b:section ... maxwidgets='2' ...

Enable/Disable Adding New Elements

Though you specified a new maxwidgets attribute value, you may not see Add a Gadget link at Page Elements page until you change this attribute value to yes. Change value to yes as you gonna add new custom header.

i.e: <b:section ... showaddelement='yes'

Now you can add custom header for your blog. But before you proceed, let's remove current header on your blog. You can find the line similar to below, just after the line of code

Change the locked attribute value to false.

 

i.e: <b:widget id='Header... locked='false'...

Now Save Template.

Go to Layout tab.



Now you can see in your layout above header there is one Add a Gadget link. Click on the link to implement custom header.

Source:http://www.bloggerial.com/2013/01/how-to-add-custom-banner-in-blogger.html