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!

1 comment:

Pengelola Sukses said...

Horey... It`s fixed! thank you, I appreciate you for taking the time out of your day to share the great part from your experiences and honestly I got it at the best point. If you have another free time would you please share your thought on our newly added product here http://www.royalgorden.com/. Thank you in advance and have a great time...