Saturday, December 29, 2007

Remove Next Blog Button

The whole navigation bar at the top of a blogger.com blog is bullocks.

The only thing needed is the search form.

Initially I only wanted to get rid of the Next Blog button (guess why). As it turns out that is quite a popular request (oh, surprise), nevertheless Google does not seem to be very interested in making it easy to remove the Next Blog button.

Thought it is easy to remove the top navigation bar. So here I describe briefly how to disable the navbar (as described at many places) and a simple way to add back the search functionality, thought at a different location.

For comparison you can see the result at my other blog, The STOCK BLOCK. This blog you are reading right now should still have the default setup, as I haven't bothered to change it so far.

1. Disable NavBar in Blogger.com:

In blogger.com go to Template, Edit HTML, scroll down to the <body> tag and add beneath it the following code snippet:

<style type='text/css'>
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>


2. Add search form in Blogger.com:

In blogger editing mode, goto Template, Page Elements, Add a Page Element, and select HTML/JavaScript. Now place the element where you like it and edit it and fill in the following HTML code:

<form id="searchthis" action="http://stockblock.info/search" style="display:inline;" method="get"><table cellpadding="0" cellspacing="0"><tr><td valign="middle"><input id="b-query" name="q" type="text"/></td></tr><tr>
<td valign="middle" align="right"><input id="b-searchbtn" alt="Search This Blog" src="http://www.blogger.com/img/navbar/4/btn_search_this.gif" title="Search this blog" type="image"/>
</td></tr></table></form>


BTW, you might want to reverse the order of these two steps and add a new search form first before removing the navigation bar, in case something goes wrong:o).

On another note, here is a cool hack to turn the Navigation Bar on and off by the web site visitor of your blog:
show/hide the blogger navbar

3 comments:

Anonymous said...

thanks for those - works perfect

Michael Doub said...

I have not been able to make this work. Is there a specfic place under the body tag where it has to go?
michael.doub@asd20.org

Clemens Lee said...

Hi Michael,

just like this under layout, edit html:

...
<body>
<style type='text/css'>
#navbar-iframe {
visibility: hidden;
display: none;
}
</style>
<div id='outer-wrapper'><div id='wrap2'>
...

Did this recently and it works for me. So, good luck.