Saturday, November 18, 2006

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):
Blogger beta: HTML1 widget
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.

Books from Amazon

The AdSense Code: What Google Never Told You About Making Money with AdSense

Adsense Unleashed: Adsense A-z Plus 175 Killer Tips And Tricks


  NEWER POST    HOME  OLDER POST

17 comments:

  1. Anonymous11/20/2006

    Hey Peter....

    Your Search Box on the TOP does not work! Just thot i let u know!

    Just mentioned u in my stuff blog!
    Tks again for your help! :)

    ReplyDelete
  2. Hi Dele,

    Thanks for the heads up. Not very sure which blog you are referring to as there are various blogs mentioned in this blog - this blog/post itself, Adding a graphic to your Blogger Beta Header or Motivation and Self Improvement.

    The first works, the second is at the bottom probably isn't what you are referring to as it is at the bottom of the page, and if I remember correctly, was added via the Layout. That doesn't work, and your heads up remind me to remedy that. The third works for Websearch (try it, I tried searching for "blogger for dummies" and found my site at the top of the first page) and works for the sitesearch but produced no result. This is probably because it is new, set up for testing and for other purposes, and probably have not been indexed yet by Google search engine. It should work when it is indexed as it works for Websearch.

    ReplyDelete
  3. Anonymous11/22/2006

    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

    ReplyDelete
  4. Hi Jeff,

    To answer your question, I just created a new blog to test, using the Minima template. I got into the template editor, and found this:

    Jeff, unfortuately the comment would not accept the codes I try to paste in here. I will have to answer you in an update to the post.

    ReplyDelete
  5. Anonymous11/22/2006

    u can see what template i am using its the new rounders template and i am using the beta . www.netskool.blogpsot.com
    I did look in the right place and its definetly no there in this template. I did a work around put the link bar under the widget content and added the search bar in a normal add page element

    ReplyDelete
  6. Anonymous11/22/2006

    u can see what template i am using its the new rounders template and i am using the beta . www.netskool.blogpsot.com
    I did look in the right place and its definetly no there in this template. I did a work around put the link bar under the widget content and added the search bar in a normal add page element

    ReplyDelete
  7. I have updated the post. It is right at the bottom of the post.

    ReplyDelete
  8. Hi Jeff,

    Your URL www.netskool.blogpsot.com
    have been mistyped, and lead to a bible school. It should be
    www.netskool.blogspot.com

    I checked your searchbar and link units, and they do work. Did you actually add them via the Layout "Add a Page Element". If so, perhaps Blogger/Adsense has worked out the bugs or the problem may exist with some template and not others. When I get the time, I will try it out.

    ReplyDelete
  9. Anonymous11/22/2006

    Maybe someone will actually answer me? I am using blogger beta, but I have NONE of the wrappers you have shown when I try to edit HTML. In fact, there isn't even a link to "add a page element" under the Templates heading. Any ideas? Your help is greatly appreciated!

    ReplyDelete
  10. Hi Jennifer,

    Have you already migrated your blog to Blogger beta or are you still using the classic template for your blog. If you are using the beta template, when you sign into your Dashboard, you should see "Layout" at the extreme right of the blog. Look at the screenshot in this post: Blogger Beta Dashboard (click "BACK" button to return to this page). If you are still using the classic template, then you will see "Template" instead of "Layout"

    ReplyDelete
  11. hmm i thought i did mention this before peter ( maybe i posted it in the google groups ..ima getting a bit confused .. ive got 3 jobs lol) .. anyway i tried it your way then i did it my way with your help .. Modified adsense link code in template html and search bar in add page element ..check google groups i might have replied there too.
    Cheers for the tip
    http://www.netskool.blogspot.com

    ReplyDelete
  12. Hi Bollywood Hub,

    Hoped you read the update. I contacted AdSense Help Center, and they said you cannot alter the script.

    ReplyDelete
  13. Hi Bollywood Hub,

    Hoped you read the update. I contacted AdSense Help Center, and they said you cannot alter the script.

    ReplyDelete
  14. hei um.. this one is for blogger beta rite? is there any way i cud get this for the classic one? i want to upload a banner to my blog, and i need to align it to center.. how do i do this?
    pleeeeeeeeeeez help me.

    uh.. it'll be very helpful if you cud mail me at thehakuru@msn.com please..
    thnkyou so much...

    ReplyDelete
  15. yeah .... you can see a practical example here .... since i applied the same to

    http://getmostoutof.blogspot.com



    http://jobsdaily.blogspot.com

    ReplyDelete
  16. Hi Peter thank you for the above help. However i just cant align my adsense code right under the header.
    Don't know where to put the align code... If some how you could help me figure this out i would appreciate it. My blog is URLHollywood blogspot com.

    ReplyDelete
  17. I hope you noticed this update: "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"

    If you are trying to center the search bar, surround the codes with <div style="text-align:center;"> and </div>

    ReplyDelete

Find help, info, instructions, tips, tricks

Tip: Use search box below or this box, labels in the first right sidebar, archive, ctrl+F for this page or sitemap to find topics