Few months ago I posted a Javascript class on how to Implement a paging listbox using jQuery. which has drawn a lot of traffic and few questions lately so I thought it would be more convenient to rewrite the code as jQuery plugin and make few enhancements plus providing a complete sample code in VB.Net and C#.

Enhancements:

1. Easier usage, You only need to insert a div with the class "paging-listbox" and settings inside "options" attribute to automatically have the paging listbox loaded inside that div. still you can load the listbox with regular Javascript call.
2. Added support for right-to-left layout.
3. You can pass additional parameters to source page via AJAX. for example a category ID that user selects from another form field and should be used to query records by on the source page.
4. Few visual enhancements.

Implementation Steps

1. First, download minified JavaScript of latest version from project page.
2. Upload plugin Javascript file to your site. replace the link "jquery.paginglistbox-1.0.js" with the full URL you got.
   *No need to host jQuery Javascript on your own.. Google hosts jQuery for you!
3. Include the following CSS Code somewhere in your page usually inside Head element.
4. Insert Code as described in the following Typical usage

CSS Code
<style type="text/css">
   /* container layer of listbox */
   .pl-layer{
      border:gray 1px solid;
      margin:0;
   }
   /* arrow button */
   .pl-button{
      border:gray 1px solid;
      background-color:#333333;
      color:white;
      padding:.5px;
      font:100% arial;
      margin:0;
      width:18px;
   }
   /* keyword input */
   .pl-key{
      margin:0;
      font:100% arial;
      border:gray 1px solid;
   }
</style>

Typical Usage
You will only need to include the 2 JavaScript's (jQuery and plugin) once; even if you have more than one listbox. 
You can defer Javascript downloading in the browser by placing the JavaScript's by the end of your web page. 
Options must be separated by a comma, but a trailing comma is fatal.
<!--Include once in your page-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.paginglistbox-1.0.js"></script>

<!-- Listbox auto. created by setting class="paging-listbox" and options="{options list}" -->
<div class="paging-listbox" options="{
   source:'listbox.aspx'
   ,id:'Field2'
   ,value:'product'
}">
loading..
</div>
for more usage examples download sample code..!

Custom Usage
Load plugin content by Javascript call..
<!--Include once in your page-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.paginglistbox-1.0.js"></script>

<script type="text/javascript">
// on document ready
$(document).ready(function(){
   // Creating listbox by javascript call
   $('#listbox').pagingListbox({
      source:'listbox.aspx'
      ,id:'Field1'
      ,value:'product'
   });
});
</script> 

Check Project page for detailed documentation; Follow project changes, request features or submit bugs :(

Plugin files

1. jquery.paginglistbox-1.0.min.js
2. paging-listbox-v1-sample.zip

Plugin Documentation

1. Implementation Steps
2. Options List

Have you spent much time adding posts thumbnails using custom fields.. or -like me- spent much time trying many plugins that either not working well or very limited.

I was always not convinced with "Read more" built-in option in WordPress. As it is very unlikely to use the starting portion of your post as a teaser or summary.

Many people use custom fields for doing it which is somehow complicated. Especially if you are building a Wordpress Blog for a client; you would want to make it easy for him.

I've came across a very smart and easy plugin that will associate thumbnails to each post on your WordPress blog:
It is Custom Field Images

Here some of its features:

• The plugin will intelligently utilize WordPress built-in media library. and that comes with many advantages..
• You don't have to upload images again to attach thumbnail for each post.
• On media library window you have a button "Insert CFI" to instruct the plugin to attach the selected image to current post. plus the image title you already entered for that image. (Which is a very SEO thing to do!)
• My favorite feature is: Post Thumbnail is not saved by its URL instead by the Image ID , So in home page I can use the medium sized images and somewhere else -like Posts Reel- I can use the thumb sized images!
• Very simple installation is required to replace the code that output whole post content with the post excerpt. and you configure the plugin to insert the thumb in excerpt. That is it
• The plugin comes with a widget to display posts thumbs selected by any query you like (Recent 5 or Some Category Posts)
• Plugin can extract thumbnails from images already in your posts content.
  
• Still, If you have custom layout somewhere else. All you need is to place this line in the Loop
  <?php custom_field_image('', 'size=medium&align=left'); ?>
  Which will display medium sized images and left aligned!
  

More important than the plugin itself, is the developer Behind it. A dedicated developer that amazed me with his expertise and his fast response to bug reports or feature requests.

Go, get latest version from Plugin Homepage , Version 2.0 was just released last night!

My first jQuery Plugin.. A 4KB jQuery plugin instead of a 118KB Google Blog Bar!!

I have shown before how to use Google Blog Bar as related posts widget, But when I actually tried to use it on my site, I didn't like all these JavaScript/CSS files that I've to include.
And since I already use jQuery -and who doesn't- I decided to rebuild the Blog Bar from scratch.

Of course, I'll be using the RESTful interface of the AJAX Search API that returns JSON encoded results. So I didn't scratch too much :)

Quick Definitions..
Google Blog Bar is a Google AJAX Search API application that lets you easily add page-controlled blog search results to your web pages or blog.

AJAX Search API is the easiest way to incorporate a Google search box on your site. You can incorporate results from Web Search, News Search, and Blog Search into your blog or web site with just a few lines of JavaScript.

Advantages Of My jQuery-ed Google Blog Bar:

1. Much lighter: Using Google Blog Bar, you will have to include 3 Javascript files (2 files Actually , but fist one dynamically loads the third ):
   - Google AJAX API Loader file which is 15KB 
   - And AJAX Search API file which is 72KB
   - Google Blog Bar file which is 31KB
   -  Plus 2 CSS files that you can go without them and weighs 26KB total
   So, Total of Javascript files is 118KB vs. My 4KB Blog Bar!
   Of course, I will not count jQuery 55KB, cause -as I said- it is an essential include.
2. More Control: Google Blog Bar will do repeated JSON queries to get more results that I didn't need and can't be disabled.
3. It is jQuery-ed, Which is the most important :) One can add extra pretty jQuery effects..
4. Works as related posts widget: When no query expression was set , By Default plugin use current page tags to create search expression by ORing those tags.

Implementation Steps

1. First, download minified JavaScript of latest plugin version from project page http://code.google.com/p/jquery-ed-google-blog-bar.
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
7. And the most technically important :)  Give me some Digg/Dzone love or a link back attribution.

CSS Code
The following CSS code will show a typical Blog Bar as seen in the footer below.
<style type="text/css">
/* 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;
}
</style>

Typical Usage
To show a horizontal blog bar.. place this div where you like, set options attribute and they get auto. loaded!
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>  

Check Project page for detailed documentation; Follow project changes, request features or submit bugs :(

If you liked the plugin, Would you please vote for it on plugin page at jQuery site.

The Google AJAX Search API provides simple web objects that perform inline searches over a number of Google services (Web Search, Local Search, Video Search, Blog Search, News Search, Book Search, Image Search, and Patent Search).

It is an old news that: The API exposes a raw RESTful interface that returns JSON encoded results so it would be easily processed by most languages and runtimes.

Although API JavaScript objects allow you to set site restrictions, On RESTful Interface nothing was said on how to do so using the Standard URL Arguments..!

Enough intro.. How to fix that?
You would normally create HTTP request and send the Standard URL Arguments. Particularly the search expression 'q' can be something like 'Google'.
What you need to do is to change it to
'Google site:moretechtips.net' in case you are doing a web search,
and
'Google blogurl:moretechtips.net' in case of a Blog Search..
and
'Google source:bbc' in case of a news Search..

Check my 4KB jQuery plugin using RESTful Interface of AJAX Search API to replace the 118KB Google Blog Bar!

Previously, I proposed a related posts widget for Blogger based on Blogger Data API .
This time will do simple adjustments on 2 Google AJAX Search API controls to work as related posts widgets. which should work on any blog as opposed to the previous method which was limited to Blogspot blogs only.

What is the Google AJAX Search API?

The Google AJAX Search API lets you put Google Search in your web pages with JavaScript. You can embed a simple, dynamic search box and display search results in your own web pages or use the results in innovative, programmatic ways :)

Google AJAX Search API Offers 2 handy search controls:
First take a look on both before we modify them..


Simple Search Box
Integrate Web Search, News Search, and Blog Search into your web site, and easily format the results to fit your site's style. You can also display results from your Google Custom Search Engine.

Blog Bar
Put a dynamic Google Blog bar on your web pages. Just enter the searches you want to power the blog bar, and the AJAX Search API does the rest. We support two different form factors — a thin horizontal strip and a wider vertical bar — so it's easy to incorporate dynamic blog content into the layout of your site.

Adjustments:

1. I will extract tags of current post from anchor (A) elements with the attribute [ rel=tag ] , and use them to execute a blog search.
2. Will also check that the current page is a post page by matching to a URL pattern.
3. Using CSS: will hide the search form of the Simple Search Box, also the Paging links and Posts snippets, then will attach the "powered by Google" branding to the widget bottom.
   

Advantages using Google AJAX Search API over Blogger Data API

1. Very generic; You are not limited to blogspot blogs, You can use this on other blogging software such as Wordpress, And if you like you can show related posts from other blogs as well.
2. Blogger Data API didn't support to search by all tags onetime. I had to aggregate each tag feed and calculate posts relevancy. This time we can query all search results once by ORing all tags.
   

The Adjusted Simple Search Box
<!-- CSS Part -->
<style type="text/css">
   /* bold the section header */
   .gsc-title { font-weight : bold; }
   /* Hide Search box. You can leave the search box shown to check that Tags were extracted correctly */
   form.gsc-search-box { display:none; }
   /* Hide and the paging box */
   div.gsc-cursor-box { display:none; }
   /* Hide result sinppet! */
   .gs-snippet { display:none; }
   /* Hide result url if you are restricting it to your blog */
   .gs-visibleUrl {display:none; }
</style>

<!-- Javascript Part -->
<script src="http://www.google.com/uds/jsapi?key=YOUR-KEY" type="text/javascript"></script>
<script type="text/javascript">

//<![CDATA[

// Load Search API Js v1
google.load('search', '1');

function DummyClipSearchResult(result) {}
function OnLoad() {
   if(!isPost()) return; // If not a post page
   var tags = getTags();
   if(tags.length==0) return; // If no tags found

   // Create a search control
   var searchControl = new google.search.SearchControl();
   // attaches the "powered by Google" branding into that element
   google.search.Search.getBranding(document.getElementById('branding'));

   // site restricted blog search
   var blogSearch = new google.search.BlogSearch();
   blogSearch.setUserDefinedLabel('Related Posts');
   blogSearch.setSiteRestriction('http://www.moretechtips.net');

   // Results are displayed as fully as possible within the object
   var options = new google.search.SearcherOptions();
   options.setExpandMode(google.search.SearchControl.EXPAND_MODE_OPEN);
   searchControl.addSearcher(blogSearch,options);

   // tell the searcher to draw itself and tell it where to attach
   searchControl.draw(document.getElementById('searchcontrol'));

   // execute search on tags list by logically ORing
   searchControl.execute(tags.join(' | '));
}

// extract tags from A elements that has attribute rel=tag
function getTags() {
   var tags = [];
   var a = document.getElementsByTagName('a'); // get all A elements
   for(var i=0; i<a.length; i++) {
      var rel = a[i].getAttribute('rel'); // check rel='tag'
      if (!rel || !a[i].firstChild) continue;
      var tag = a[i].firstChild.data;
      if (!tag) continue;
      tag= tag.replace(/\n/g,'').replace(/^\s\s*/,'').replace(/\s\s*$/,''); //some cleaning
    if (rel.toLowerCase()=='tag' && tag) tags[tags.length] = tag;
   }
   return tags;
}
// This fucntion check if the current page is a post to execlude index & archive pages
// It looks for a blogspot post pattern like '/2009/01/post-title.html'
// If you'r on Wordpress Change line #4 to: if(!p.match(/^\/\d{4}\/\d{2}\/\d{2}\/[\w\-\_]+\//)) return false;
function isPost() {
   // fixed array of posts you might wanna execulde like 'contact' post
   var x = ['/2009/01/contact.html'];
   var p = location.pathname;
   if(!p.match(/^\/\d{4}\/\d{2}\/[\w\-\_]+\.html/)) return false;
   for(var i=0; i<=x.length; i++) if(p==x[i]) return false;
   return true;
}
// setup on load call back
google.setOnLoadCallback(OnLoad, true);
//]]>
</script>

<!-- HTML Part : where widget is attached-->
<div id="searchcontrol"></div>
<div id="branding"></div>

The Adjusted Blog Bar
<!--
// The Following div element will end up holding the actual blogbar.
// You can place this anywhere on your page.
-->
<div id="blogBar-bar">
<span style="color:#676767;font-size:11px;margin:10px;padding:4px;">Loading...</span>
</div>

<!-- Ajax Search Api and Stylesheet
// Note: If you are already using the AJAX Search API, then do not include it or its stylesheet again
-->

<script src="http://www.google.com/uds/api?file=uds.js&v=1.0&source=uds-blbw&key=YOUR-KEY" type="text/javascript"></script>

<style type="text/css">
@import url("http://www.google.com/uds/css/gsearch.css");
</style>

<!-- Blog Bar Code and Stylesheet -->
<script src="http://www.google.com/uds/solutions/blogbar/gsblogbar.js?mode=new" type="text/javascript"></script>
<style type="text/css">
@import url("http://www.google.com/uds/solutions/blogbar/gsblogbar.css");

/* Customize the title [Related Posts] */
.horizontal_gsblb .titleBox_gsblb {
   display:block;
   float:left;
   font-size:100%;
   padding:4px 4px 0 0;
}
/* Hide the Tags list; You can undo this to check that Tags were extracted correctly */
.horizontal_gsblb div.statusBox_gsblb{ display:none; }
</style>

<script type="text/javascript">
function LoadBlogBar() {
   if(!isPost()) return; // If not a post page
   var tags = getTags();
   if(tags.length==0) return; // If no tags found

   var blogBar;
   var options = {
      largeResultSet : false,
      title : 'Related Posts',
      horizontal : true,
      orderBy : GSearch.ORDER_BY_DATE,
      // restrict by you site
      siteRestriction : 'http://www.moretechtips.net',
      autoExecuteList : {
         executeList : [tags.join(' | ')] // execute search on tags list by logically ORing
      }
   }
   blogBar = new GSblogBar(document.getElementById('blogBar-bar'), options);
}

// extract tags from A elements that has attribute rel=tag
function getTags() {
   var tags = [];
   var a = document.getElementsByTagName('a'); // get all A elements
   for(var i=0; i<a.length; i++) {
      var rel = a[i].getAttribute('rel'); // check rel='tag'
      if (!rel || !a[i].firstChild) continue;
      var tag = a[i].firstChild.data;
      if (!tag) continue;
      tag= tag.replace(/\n/g,'').replace(/^\s\s*/,'').replace(/\s\s*$/,''); //some cleaning
      if (rel.toLowerCase()=='tag' && tag) tags[tags.length] = tag;
   }
   return tags;
}
// This fucntion check if the current page is a post to execlude index & archive pages
// It looks for a blogspot post pattern like '/2009/01/post-title.html'
// If you'r on Wordpress Change line #4 to: if(!p.match(/^\/\d{4}\/\d{2}\/\d{2}\/[\w\-\_]+\//)) return false;
function isPost() {
   // fixed array of posts you might wanna execulde like 'contact' post
   var x = ['/2009/01/contact.html'];
   var p = location.pathname;
   if(!p.match(/^\/\d{4}\/\d{2}\/[\w\-\_]+\.html/)) return false;
   for(var i=0; i<=x.length; i++) if(p==x[i]) return false;
   return true;
}

// arrange for this function to be called during body.onload
GSearch.setOnLoadCallback(LoadBlogBar);

</script>

To implement this on your blog:

1. Make sure that your blog exists in Google Blog Search like My Blog, Note that you can see results from your blog only.
   If you are not there then you are doing something wrong in your blog!
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. Replace my key with yours where you see [key=YOUR-KEY... ] at the included Js file of the Google API Loader JS.
   
   

Of course you can have the controls display related posts from any blog by removing the site restriction.
Or you can set it to "dzone.com" to get fresh related links from everywhere.

AJAX Search API also offers search results as JSON if you wish to use it with a language other than JavaScript..