Setup a Blog: hide or remove the navbar and add blog search box (blogger beta)
Have you ever visited a blog with search boxes that let you search their entire blog, with the search result loading internally? Have you ever wish you can do this in your Blogspot account?
Well now you can, with the new Blogger Beta. This tutorial will teach you how to add search box that will load search result INSIDE your blog.
Here's the thing: if you've migrated to the new Blogger Beta (see my last posts on how to migrate) you already have the new the search box. Where? Look above your blog - it's docked on the navbar.
So what we'll do is:
1. Hide the navbar.
2. Construct the search box, and reposition it.3. Resize the search box.
4. Change the appearance of the search button.To hide the navbar if you're using Blogger Beta
The obsolete way to hide the navbar:
#b-navbar {
height:0px;
visibility:hidden;
display:none
}
This will NOT work anymore. This is because the css pointing to #b-navbar is now embedded inside an <iframe>:
#navbar-iframe {
position:absolute;
top:0;
left:0;
z-index:500;
}
Looking at the #navbar-iframe, there 3 ways to hide the navbar:
1. Cover the iframe with another a layer (z-index:1000), then put the content of your blog on top of it (z-index: 1500);
2. Cover the iframe with the content of your blog (z-index: 1000).
3. Shrink the navbar.
I prefer the last method. Here's what I've done: I've replace the #-b-navbar of the old hack with #navbar-iframe:
After you migrate to Blogger Beta:
1. Click Template > Edit HTML
1. Paste this code after <style type="text/css">:To add a search box using Blogger Beta
1. Paste this code wherever you like (inline with the sidebar, after the post titles, or below your post, it's your choice):
2. Replace yourblog with the name of your blog.
To Resize the search box.
1. Add maxlength and size to the box.
2. Resize to you preference. Maxlength (x) is the maximum number of characters inside the search box. Size (y) is the length of the search box.
For example, here's what I use:
To change the appearance of the search button:
from this......to this
...or this
To reposition the navbar
But what if you don't want to hide the navbar, but need to reposition it instead? Here's how to do that:
1. Paste this code after <style type="text/css">:
2. Paste this code inside your template. This will position your navbar. Put it wherever you like (after the title, inside the content, or at the footer, it's your choice):
Notes
If you're repositioning the navbar, put it in the Edit HTML and NOT the Create/Edit posts page.That's it! Hope you implemented it well. If you have some questions or suggestions, leave a comment here, and I'll get back to you as soon as I can.
