Blogger navbar

The blogger branded bar hides itself as soon as the mouse moves in an area outside of the bar. This are four lines of jQuery code.

$(document).mousemove( function(e) {
ym = (e.y || e.clientY);
if(ym < 32){ $("#b-navbar").attr("class","show"); }else{ $("#b-navbar").attr("class","hide"); }
});

First we add the mousemove event to the document so that it can monitor the cursor. Than we define the place of the cursor in relation with the top of the visible website.
The bar is 32 (firefox)/ 34 (IE) pixels so i took the lowest number. If the mouse is below that height the class show will be added to the bar whitch the blogger people gave the id b-navbar. If the mouse is above that height the class show will be added.

My first impulse was to use the hide and show functions of jquery but they didn't respond so i made a hide and show css class where i change the visibility.

You could put the search box on your page so it stays accessable all of the time by putting the form code somewhere into your template.

<form id="b-search" name="b-search" action="http://search.blogger.com/"><input type="text" id="b-query" name="as_q" />
<input type="hidden" name="ie" value="UTF-8" />
<input type="hidden" name="ui" value="blg" />
<input type="hidden" name="bl_url" value="xwerocode.blogspot.com" />
<input type="image" src="http://www.blogger.com/img/navbar/2/btn_search_this.gif" alt="Search This Blog" id="b-searchbtn" title="Search this blog with Google Blog Search" onclick="document.forms['b-search'].bl_url.value='xwerocode.blogspot.com'" />
<input type="image" src="http://www.blogger.com/img/navbar/2/btn_search_all.gif" alt="Search All Blogs" value="Search" id="b-searchallbtn" title="Search all blogs with Google Blog Search" onclick="document.forms['b-search'].bl_url.value=''" />
</form>

I skimmed the divs and other things that where in the original form to make the form more readable. Ofcourse you have to change xwerocode.blogspot.com to your url or you could search my blog on yours.
If you want to change the color of the form just use the style attribute in the form tag.
You can change the type of the button from image to button to have more lay-out options but don't forget to add a value to the "search this blog" button.