Saturday, November 17, 2007

Remove Blogger Navbar, add search box

Ok, first things first, hide the Blogger Navbar.

For old Blogger, click on Template, scroll down through the template style sheet until you see Header, and paste the CSS definition in red below:

/* Header

----------------------------------------------- */
#navbar-iframe {
height:0px;
visibility:hidden;
display:none
}


For Blogger Beta, click Layout to go to the Template tab, then click on Edit HTML. Scroll down through the template style sheet until you see Header, then add the CSS definition in red below:

/* Header
-----------------------------------------------
*/
#navbar #Navbar1 iframe{display:none;visibility:none;}


Add this HTML form to wherever you want your search box displayed, just remember to replace the highlighted Your_Blogs_Name.

<form action="http://Your_Blogs_Name.blogspot.com/search?"><input tabindex="10000" name="q" maxlength="128" type="text"><input value="Search" type="submit"></form>


The music video blog Vid Digger has a working example of the search box minus the Navbar.

Glad to be of help!

No comments: