Search Google and/or this blog

Showing posts with label Search. Show all posts
Showing posts with label Search. Show all posts

Sunday, March 15, 2009

Creating "Search This Blog" or Blogger Search box

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:

  1. Go to Layout tab under dashboard for your current blog.
  2. Hit "Add Gadget"
  3. Choose HTML/Javascript.
  4. Paste the copied code into the content box after giving title in title box.
  5. The content box should look something like this :


<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!!!

Continue >>
Posted by Yours truly ... 0 comments
Labels: ,

Add a Google Search Box on Your Blog

Stumble del.icio.us Reddit MyWeb! Facebook Google bookmark

Do you want to add a new Google search on your blog? It's pretty simple. Just follow the steps defined here and you will be good.

  1. Go to Google Adsense and then login.
  2. Click on Adsense Setup.
  3. Click on "Adsense for Search".
  4. Click search type "The entire web".
  5. And then just follow the default patterns or whichever colors you like.
  6. At the end of it Google gives you some code. Copy both of them together.
  7. And come back to your blogspot blog.
  8. Now goto dashboard and then hit "Add a gadget".
  9. Select HTML/Javascript in the gadget list.
  10. Add a title "Search google" the title text.
  11. Paste the code that you copied in step 6. It should look like this if you copied it correctly

    :<form id="cse-search-box" action="http://myblogname.blogspot.com">
    <div>
    <input value="partner-your-pub-id" name="cx" type="hidden"/>
    <input value="FORID:10" name="cof" type="hidden"/>
    <input value="ISO-8859-1" name="ie" type="hidden"/>
    <input name="q" size="71" type="text"/>
    <input value="Search" name="sa" type="submit"/>
    <a href="http://myblogname.blogspot.com/?q=&sa=Search#1099">Clear Search</a>
    </div>
    </form>
    <script src="http://www.google.com/coop/cse/brand?form=cse-search-box&lang=en" type="text/javascript"></script>
    <div id="cse-search-results"></div>
    <script type="text/javascript">
    var googleSearchIframeName = "cse-search-results";
    var googleSearchFormName = "cse-search-box";
    var googleSearchFrameWidth = 800;
    var googleSearchDomain = "www.google.com";
    var googleSearchPath = "/cse";
    </script>
    <script src="http://www.google.com/afsonline/show_afs_search.js" type="text/javascript"></script>


  12. Hit save and come back to Layout tab.
  13. Now move your gadget to the top area or whichever area you want to display.
  14. Hit save and you are done.


If you want to have radio buttons to toggle between searching web or your blog, you can append this code just below the search button code.


<font size="-1">
<br/><input checked value="" name="sitesearch" type="radio"/> Entire Web
<input value="mycomponent.blogspot.com" name="sitesearch" type="radio"/> This Blog <br/>
</font>


Continue >>
Posted by Yours truly ... 0 comments
Labels: ,
Subscribe to: Comments (Atom)