Blogger Beta: Adding a working searchbar and AdSense link unit to the Header

Blogger Beta: Adding a working searchbar and AdSense link unit to the Header

A reader of my blogs asked how to add a working search-bar to the Header. Actually, this post Adding a graphic to your Blogger Beta blog Header (close new window to get back to this page) will show how to do it if one understand the method, but I thought it will be a good idea to experiment on another blog and describe the method specifically how to add a working search bar and link unit to the Header. You will see in this blog Motivation and Self Improvement (close new window to return to return to this page) a working search-bar and a link unit in the Header. Type some keywords into the search box and try it out to confirm it works. Note that there are other things in the sidebar and in the footer, but when I started, there were only the standard profile and archive in the sidebar. The rest were added later. Update 2 November 2006: I changed to Ramani's 3 column Minima template and tried to add the searchbar, but this time, when previewing, I got the error message"Your template could not be parsed as it is not well-formed. Please make sure all XML elements are closed properly.
XML error message: Attribute name "checked" associated with an element type "input" must be followed by the ' = ' character." However, do read the rest of the post as it is now possible to add a working link unit to the header without having to tamper with the AdSense script.

This is the way I added a working search bar in the header. Sign into Dashboard. For the blog you want to modify, click LAYOUT, then click EDIT HTML. Then look for this block of codes in the template:

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

Change maxwidgets='1' to maxwidgets='' and change showaddelement='no' to showaddelement='yes'. So the section should now be

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='' showaddelement='yes'>
<b:widget id='Header1' locked='true' title='Replacing Blog Header (Header)' type='Header'/>
</b:section>
</div>

Click SAVE TEMPLATE. Then click PAGE ELEMENT tab to go back to LAYOUT. You will see an extra "Add a Page Element" above the Header. Click "Add a Page Element" and int the pop-up, select HTML/JAVASCRIPT and type in <!-- searchbar --> into the box, click "Save changes". In my case, I have not added any HTML/jayascript in that template, so this widget shold have id='HTML1' (circled in red in the screenshot below: (click to enlarge):


If you have already other HTML widgets added, just count the number of the HTML widgets you already have (say X), then the "blank" page element you just added above would have the id='HTMLX+1' and you will then have to paste the searchbar script in that widget.

I opened another tab to sign into my AdSense account to generate the searchbar script, copy, return to the post editor, and pasted the script just after
<div class='widget-content'>

If you want the searchbar to be centered, then surround the searchbar script with tags <center> and </center>

To add the AdSense link unit, I go to the Layout, and in the Header, click "Add a Page Element" and in the pop-up, select HTML/javascript and type in a comment
<!-- link unit -->
then click "Add to blog". As this is the second HTML widget I added, I then opened the HTML editor with the "Expand HTML widget" ticked, and look for what is shown above, but this time with HTML2 in the widget, go to AdSense, generate the script for the link unit and pasted it just after
<div class='widget-content'>
However, this time, for the link unit to be displayed, the comment tags <!-- and //--> have to be deleted from the script. This is technically violating the AdSense Program Policy, and I will be contacting them regarding this. I will post their response here.

UPDATE 2 December 2006: It is now possible to add a working link unit in the header via the "Add a Page Element" widget in the Layout, so the above hack is no longer necessary

UPDATE 22 November 2006: A comment from a reader: "the showaddelement= No to be changed for getting the google search in head wrapper is not present in the beta template anymore google must have removed it.. any ideas"

I tried answering him in the comment section, but it will not accept the code I tried ot paste in there, so no answering his question here.

I started a new test blog and opened the template editor. I found the followin codes in the template:

<div id='header-wrapper'>

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

<b:widget id='Header1' locked='true' title='Show Element (Header)' type='Header'/>

</b:section>

</div>

That confirm Blogger Beta has not removed the "showaddelement='no' from the Minima template. Maybe he was using a different template or didn't look hard enough. If you have any problem searching for a line of code in the template, one easy way is to copy the template into Notepad, use the search function to find the code, do whatever modification you need to do, copy the modified template, delete the content of the template editor window, paste the modified template into the now empty template editor window.