How to add this plugin to your site.

Steps

1. First, download minified JavaScript of latest plugin version from downloads page.
2. Sign-up for an AJAX Search API Key for your website You must have a Google Account to obtain a Google API key, and your API key is tied directly to your Google Account. You can generate multiple API keys for your account if you have multiple web sites.
3. Set your key in the default options list where it says key:'YOUR-KEY'
4. Upload plugin Javascript file to your site. If you are on Blogger try a free file hosting that provides direct linking like FileDen. replace the link "jquery.googleblogbar-1.0.min.js" with the full direct URL you got.
   
   Direct Linking: No redirection to another URL happens when you open link in a browser.
   
   No need to host jQuery Javascript on your own.. Google hosts jQuery for you!
5. Include the following CSS Code somewhere in your page usually inside Head element.
6. Insert Code as described in the following Typical usage

CSS Code

The following CSS code will show a typical Blog Bar as seen in the footer below.

 / container /
 div.my-blog-bar{
    position:relative;
 }
 / inner div /
 div.mbb-inner{
    border:silver 1px solid;
    padding:4px 12px 8px;
    margin:0 78px 0 0;
    position:relative;
    overflow:hidden;
 }
 / bar title /
 div.mbb-inner h2{
    float:left;
    font-size:12px;
    margin:0 4px 0 0;
    line-height:1.4em;
 }
 / ul list /
 div.mbb-inner ul{
    float:left;
    padding:0 0 0 0;
    margin:0 0 0 0;
 }
 div.mbb-inner li{
    margin:0 0 0 0;
    line-height:1.4em;
    list-style-type:none;
 }
 / post link /
 div.mbb-inner li a{
    color:navy;
 }
 / author name and date /
 span.mbb-by{
 color:gray;
 }
 / excerpt and blog url /
 .mbb-content{ }
 .mbb-url{
    color:green;
 }
 / powered by google /
 div.mbb-branding{
    margin-top:0;
    position:absolute;
    right:0;
    top:0;
    width:75px;
 }
 div.mbb-branding-text{
    color:gray;
    font-size:10px;
 }
 a.mbb-branding-link img{
    border-width:0;
 }
 

Typical Usage

To show a horizontal blog bar.. place this div where you like.

You will only need to include the 2 JavaScript's (jQuery and my plugin) once; even if you have more than one div.

You can defer Javascript downloading in the browser by placing the JavaScript's by the end of your page. 

Options must be separated by a comma, but a trailing comma is fatal.

 <!--Inlcude once in your page-->
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>   
 <script src="jquery.googleblogbar-1.0.min.js" type="text/javascript"></script> 
<!-- Add as many as you need... div with class="my-blog-bar" -->
 
<!-- Show Results Restricted to "moretechtips.net" -->
 <div class="my-blog-bar" options="{title:'More Tech Tips!' , blogURL:'moretechtips.net'}">loading..</div> <div style="clear:both"></div> 
<!-- or leave it to Default options -->
 <div class="my-blog-bar">loading..</div> <div style="clear:both"></div> 

Custom Usage

Load plugin content by javascript call..

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>   
 <script src="jquery.googleblogbar-1.0.min.js" type="text/javascript"></script> <script type="text/javascript">   
 $(document).ready(function(){
    $('div.some-other-class').myBlogBar({
       key:'YOUR-KEY'
       ,title:'Blogsphere'
       ,q:'Google'
       ,hl:'en'
    });
 });
 </script> <div class="some-other-class">loading...</div>