Monday, December 19, 2011

How to add widget on Blogger Header

On blogger, you probably tried and experimented with the blogger gadgets or widgets, they are very easy to use and you can drag them anywhere you want. Usually beginners rely more on adding gadgets on their blog rather than editing the html, so it might not confuse them designing their blog.

But there are lay out parts of blogger that you cannot add a gadget, like the Header bar. Most of us wanted to add more gadgets on the header bar so it can save some space, put advertisement or put your own banner as you like.
I searched the web and found some techniques but it requires html knowledge. For beginners you are kinda worried about editing your html for reasons of messing up you entire blog.

So I found this simple instruction.

Step 1. Click "layout" or "design" on the old blogger interface----> "edit html"
Step 2. Look for this code (hint: use control F).

              <div id="header-wrapper">

Step 3. You can find that tag in this section

<div id="header-wrapper">   <----- the tag we are looking for
<b:section class="header" id="header" maxwidgets="1"showaddelement="no">
<b:widget id="Header1" locked="true" title="Sample Blog (Header)" type="Header">
</b:widget>
</b:section></div>

Now the instruction is to change the tag number in blue color to how many gadgets you will add. 
Dont erase the " " tag, just enclose the number within the " ". On the red colored tag, just replace the "no" to "yes" tag.

<div id="header-wrapper">
<b:section class="header" id="header" maxwidgets="3"showaddelement="no">
<b:widget id="Header1" locked="true" title="Sample Blog (Header)" type="Header">
</b:widget>
</b:section></div>

Click save, and you will notice an extra gadget slot is added on the header. You can put as much as 5 gadgets