Mời bạn ấn vào link https://sites.google.com/site/hoctroarticles/ hay http://issuu.com/kevindu để xem hai quyển sách tôi viết: "Học Trò Tìm Hiểu Nhạc Phạm Duy" và "Những Mẩu Chuyện về Âm Nhạc".

Introducing The New Related Articles Widget

Hi friend,

This is my first take on the new Related Articles Widget.

Please cut and paste the code below to a new HTML Widget from your Page Elements to see if it is working.

I cut and paste the same code to create a new widget, located at the end of this post.

You don't have to get rid of the existing Related Articles widget on your blog. This new one is a totally independent, self-contained widget!

As you can see, the widget forms a query of all the "keyword" (in this case "labels") in this post, queries, and gets a resulting list for the most relevant posts from your blog. It's just like you query a list of terms and get results from the google search at http://www.google.com/ .

The result is, in my humble opinion, a truly "most related articles" relevant set of links, unlike my previous attempts - where only the newest posts from each label showed up. This time, we employ Google's famous ranking algorithm to do the "related" part for us.

I will explain the motivations, excecution and nuances of this "beta" widget in a follow-up post. There are ways to modify the look of the results, such as showing the snippet text or not, or use CSS to alter the look of the widget.

Update: See my explanations here:

Part 1: http://hoctro.blogspot.com/2010/08/dissecting-new-related-articles-part-1.html

Part 2: in progress.


<!-- Related Articles - Take 5 - Using JQuery & Google Search API - by Hoctro 8/2010 -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script language="Javascript" type="text/javascript">//<![CDATA[

//var website = "hoctro.blogspot.com";
var website = getBaseURL();
var hoctroRelated = "site:" + website + " ";
var labelArray = new Array();

function getParams() {
  $('div.post-footer-line span.post-labels a').each(function(idx, el) {
    var test = 0;
    var textLabel = $(el).html();
    for (var i = 0; i != labelArray.length; i++) {
      if (labelArray[i] == textLabel.toString()) test = 1;
    if (test == 0) {
      hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
  }); // each
// Callback main function
$(document).ready(function() {
  getParams() ;
}); // function

function OnLoadRelated() {
  // create a search control
  var searchControl = new google.search.SearchControl();

  // create a draw options object so that we
  // can position the search form root

  var options = new google.search.DrawOptions();

  // populate with searcher
  var blogSearch = new google.search.WebSearch();
  blogSearch.setUserDefinedLabel("Related Articles");
  var options2 = new google.search.SearcherOptions();

  searchControl.addSearcher(blogSearch, options2);
  searchControl.draw(document.getElementById("searchHoctroRelatedResults"), options);

// Copied from http://www.gotknowhow.com/articles/how-to-get-the-base-url-with-javascript
function getBaseURL() {
  var url = location.href; // entire url including querystring - also: window.location.href;
  var baseURL = url.substring(0, url.indexOf('/', 14));
  if (baseURL.indexOf('http://localhost') != -1) {
  // Base Url for localhost
    var url = location.href; // window.location.href;
    var pathname = location.pathname; // window.location.pathname;
    var index1 = url.indexOf(pathname);
    var index2 = url.indexOf("/", index1 + 1);
    var baseLocalUrl = url.substr(0, index2);
    return baseLocalUrl + "/";
  else {
  // Root Url for domain name
  return baseURL + "/";

  // Important, this has to be called here, otherwise main var is not yet created
  google.load('search', '1.0');
  google.setOnLoadCallback(OnLoadRelated, true);


  //#searchHoctroRelatedResults a.gs-title, a.gs-title * { color : brown; }
  //#searchHoctroRelatedResults .gs-webResult .gs-snippet { display : none; }
  //#searchHoctroRelatedResults .gs-webResult .gs-visibleUrl { display : none; }
  //#searchHoctroRelatedForm { display : none; }

<div id="searchHoctroRelatedResults">Loading...</div>
<div id="searchHoctroRelatedForm">Loading...</div>
<h6>Related Articles Widget by <u><a href='http://hoctro.blogspot.com'>Hoctro</a></u></h6>