New Related Articles Widget

Diawali dengan percakapan hangat sehangat mentari pagi dikala itu aku Beben si bloglang ganteng kalem dengan salah satu master blog kita Kang Rohman berbicara kecil mengenai para master dari luar negeri.
Beben: "Kang kamana nyak master tutorial blog anu ti luar teh!!! (celoteh aku dalam bahasa jerman sedikit perancis)"
Kang Rohman : "Oh para master pro toh, ya mungkin mereka sudah tidak aktif lagi dan mungkin sudah tidak mengupdate blognya lagi (bosan)"
Beben: "Hmmm...(desahan sedikit menahan kecewa)
Begitulah kira-kira sepenggal percakapan diantara salah satu master dengan si bloglang :D

Tanpa sengaja mentok alias jalan-jalan booo, ke salah satu master dari luar yang pro pro b-) Ternyata eh ternyata...edan dong coy, gile cut, wah mantap punya, ayeh ayeh eh eh eh Master Hoctro dooooong...!!! Sobat kita ini mengeluarkan hack lagiii. Super sekali (Mario Teguh style) :-bd Hack tersebut dinamakan dengan "Testing of the new Related Articles Widget" :D Walau kayaknya belum final tapi sobat mungkin akan mempertimbangkan hack related post karya master kita ini (eh master orang deng) ;)) :"> Sepenggal petikan kinerja hack related post...

...Widget bentuk permintaan dari semua kata kunci "(dalam hal ini "label") dalam satu posting, query, dan mendapatkan daftar yang dihasilkan untuk tulisan paling relevan dari blog kita. Ini seperti query sobat daftar istilah dan mendapatkan hasil dari pencarian google di http://www.google.com/. Hasilnya adalah, sebuah "benar-benar artikel yang terkait yang paling" yang relevan link, tidak seperti yang sebelumnya - di mana hanya posting terbaru dari tiap label muncul. Kali ini, kami menggunakan algoritma yang terkenal peringkat Google untuk melakukan hal yang "istimewa" bagian untuk hasil...

:-/ :-? Jadi simpelnya master Hoctro membuat related articles yg kinerjanya dan tampilan seperti algorithm google.


Penerapannya sangat mudah kok sob Dashboard ► Design ► Page Elements ► Add a Gadget ► pilih yang HTML/Javascript Masukan kode berikut ini...

<!-- 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 = "YOUR-NAME.BLOGSPOT.COM";
var website = getBaseURL();
var hoctroRelated = "site:" + website + " ";

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();
options.setSearchFormRoot(document.getElementById("searchHoctroRelatedForm"));

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

searchControl.setResultSetSize(google.search.Search.LARGE_RESULTSET);
searchControl.addSearcher(blogSearch, options2);
searchControl.draw(document.getElementById("searchHoctroRelatedResults"), options);
searchControl.execute(hoctroRelated);
}

// 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 + "/";
}
}

// Callback main function
$(document).ready(function() {
var labelArray = new Array();

$('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) {
labelArray.push(textLabel.toString());
hoctroRelated = hoctroRelated + '"' + textLabel.toString() + '" OR ';
}
}); // each
}); // function

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

//]]>
</script>

<style>
//#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; }
</style>

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

Lihat kode yg diberi warna biru, pilih salah satu var yg mau dipakainya! Ganti kode yg berwarna merah dengan nama blog sobat. Kalau urusan penempatan Beben tidak akan menjambarkannya, tapi kalau mau cara cepat pada halaman Page Elements drag saja itu widget related postnya (mudeung sukur gak mudeung usaha lagi) :)) Screenshot my demo...Screenshot. UPDATE
Byeee...selamat menunaikan ibadah di bulan Ramadhan :)