Stumble
del.icio.us
Reddit
MyWeb!
Facebook
Google bookmark
After creating my "Google Search" box, I wanted to have a search box completely dedicated to searching my current blog. Though, I could also have both the searches work together, but I prefer them to be separate. For creating the search specific to my current blog, I did not have to do much as I used the same search box that comes with the default blogger navigation bar. Wondering how ?? ... Read on ...
Well, if you just do a right click and view source for your current page you will realize that the navigation bar is an iFrame.
It looks something like this just below the <Body> part in the source code:
<div class='navbar section' id='navbar'><div class='widget Navbar' id='Navbar1'><script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<iframe src="http://www.blogger.com/navbar.g?targetBlogID=7763145969073648252&blogName=The+blog+hackers%27+club&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLUE&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Fblogdesignhack.blogspot.com%2F&searchRoot=http%3A%2F%2Fblogdesignhack.blogspot.com%2Fsearch" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" height="30px" width="100%" id="navbar-iframe" title="Blogger Navigation and Search"></iframe>
<div></div></div></div>
So, I thought why not just take out the search box from this navigation bar and place it in sidebar. That what I exactly did. All you need to do is just copy this part of the code from any of your pages, and follow the following steps:
<div id="navbar" class="navbar section">
<div id="Navbar1" class="widget Navbar">
<script type="text/javascript">
function setAttributeOnload(object, attribute, val) {
if(window.addEventListener) {
window.addEventListener("load",
function(){ object[attribute] = val; }, false);
} else {
window.attachEvent('onload', function(){ object[attribute] = val; });
}
}
</script>
<iframe frameborder="0" title="Blogger Search" marginheight="0" marginwidth="0" height="30px" src="http://www.blogger.com/navbar.g?targetBlogID=7763145969073648252&blogName=The+blog+hackers%27+club&publishMode=PUBLISH_MODE_BLOGSPOT&navbarType=BLACK&layoutType=LAYOUTS&homepageUrl=http%3A%2F%2Fblogdesignhack.blogspot.com%2F&searchRoot=http%3A%2F%2Fblogdesignhack.blogspot.com%2Fsearch" id="navbar-iframeSelf" scrolling="no" width="90%">
</iframe>
</div>
</div>
Just make sure that you change the width to 90% so that none of the other portions appear in sidebar.
Hit save and enjoy!!!
Subscribe to Hacks
0 comments:
Post a Comment
Leave your opinion here. Or let me know if you face a problem ...I'll try to get back to you as soon as I can.