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.
Continued from How to add Categories
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.
I always liked your Unique Blog design, and now it seems you are also in Blogger Tweaking again, after the mash up you used for your redesign.
anyway, i think this and this and the last are great Blogger post, the one before is just universal.
;)
Friend, pano gumamit nga "collapse" and "expand" tags sa blogger? I ienvy wordpress on this but I saw bloggers using this. zimm
I have found out a new way to hide the Navbar. Details can be found in my Blog
You definitely walk on water in my book! Thanks!
Aditya >> thanks for the compliment. I like minimalists designs.
Zimm >> Heto baka sakaling makatulong.
apnerve >> that's nice.
matrishak >> Thats so nice of you. Thanks too.
Hi, thanks for html code for the searchbox and for hiding the navbar.
however, i have a question: how come when i use the search box, despite multiple posts on the same subject, only two posts come up each time? this does not occur with all subjects
Can you help.
best, one2zero
I have several blogs, and I'd like to pirate the "next blog" button on the navbar to circulate between them. So , when someone gets to one of my blogs and hits that button instead of a new random blog, they'd be directed to one of my other blogs (a handy way to recirculate internal traffic and keep people snared while exposing them to my wonderful content).
Any idea about how to co-op where the navbar's "next blog" button links to?
Dominic Ebacher
ebacherdom.blogspot.com
Hello.Thanks for that tip on now to hide the navigation bar on blogger beta. I was actually pointed to this blog by a member in Digital Point forum, and was surprised to find a Pinoy blog. Galing!
I've searched for this last night and never got the solution, not until I read your tip.
Thanks so much!
thanks for the tips!very helpful for me!
your blog is very nice
visit mine when u have time
This worked beautifully for me. Thank you very much!
Here's an additional approach I find very useful. It doesn't just hide the navbar but adds a button to click on to later reveal/hide the navbar. Its based on the same idea.
is there a way of making this work with the Classic template?
I menat to say Classic Template with ftp publishing? I found a site www.ponderingpig.com that has set up the navbar for ftp, but I want a small sidebar search box for ftp. Thanks
Hi, thanks for visiting.. matagal na nga pala to..
I googled on how to do this... sana sa basapa.com ako napunta.. :)
very cool blog btw.. just got yourself another reader.. ;)
More than 20 search results?anyone?