Info Blog, alternatif pasang widget Alexa

Info Blog, alternatif pasang widget Alexa ini berisikan tutorial alternatif pemasangan widget Alexarank pada blog yang tidak memperberat loading blog, alias tetap ringan. Ketahuilah, bahwa pemasangan widget Alexarank yang standart sangat berpotensi untuk memperberat loading blog, hal ini dapat kita ketahui saat kita mempergunakan fasilitas Google PageSpeed Insights. Faktor yang memperberat loading blog tersebut adalah adanya text Javascript pada rangkaian kombinasi pemasangan widget ini secara standart.

Kode pemasangan widget Alexarank secara standart adalah seperti contoh di bawah ini :

<a href="http://www.alexa.com/siteinfo/infoblog971.blogspot.com"><script type='text/javascript' src='http://xslt.alexa.com/site_stats/js/s/a?url=infoblog971.blogspot.com'></script></a>

Perhatikan text Javascript yang tercetak tebal di atas, apa isinya ..... ? Isinya adalah rangkaian script seperti di bawah ini  :

function AlexaSiteStatsWidget(){
var keyStr = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=";
var jsUrlRegex = /http:\/\/xslt.alexa.com\/site_stats\/js\/(.)\/(.).*(?:[\?&]|&amp;)url=([^\?&]*)/i;
var jsAmznIdRegex = /http:\/\/xslt.alexa.com\/site_stats\/js\/.*[\?&]amzn_id=([^\?&]*)/i;
var imageSrcPrefix = "http://xsltcache.alexa.com/site_stats/gif/";
var detailURLPrefix = "http://www.alexa.com/data/details/main";

this.replaceScripts = function replaceScripts(){
var scriptElements = document.getElementsByTagName("script");
var thisScript = scriptElements[scriptElements.length - 1];
var scriptSource = thisScript.src;
if(scriptSource != null){
var urlMatched = scriptSource.match(jsUrlRegex);
var decodedURL = decodeURIComponent(urlMatched[3]);
if(urlMatched != null){
var associatedMatched = scriptSource.match(jsAmznIdRegex);
var base64EncodedURL = encode64(decodedURL);
var imageURL = imageSrcPrefix + urlMatched[1] + "/" + urlMatched[2] + "/" +
base64EncodedURL + "/s.gif";
var img = new Image();
var fullURL = getFullURL(decodedURL);
img.src = imageURL;
img.setAttribute('border', '0');
if(urlMatched[1] == "s")
img.alt = "Alexa Certified Traffic Ranking for " + decodedURL;
else
img.alt = "Alexa Certified Site Stats for " + decodedURL;
var newLink=document.createElement('a');
var detailURL = detailURLPrefix;
if(associatedMatched != null)
detailURL = detailURL + "?amzn_id=" + associatedMatched[1] + "&url=" + fullURL;
else
detailURL = detailURL + "?url=" + fullURL;
newLink.setAttribute('href', detailURL);
newLink.className='AlexaSiteStatsWidget';
newLink.appendChild(img);
thisScript.parentNode.insertBefore(newLink,thisScript);
}
}
}

function getFullURL(inputURL){
if(inputURL.substring(0,5).toLowerCase() != "http:")
return "http://" + inputURL;
else return inputURL;
}

function encode64(input) {
var output = "";
var chr1, chr2, chr3;
var enc1, enc2, enc3, enc4;
var i = 0;

do {
chr1 = input.charCodeAt(i++);
chr2 = input.charCodeAt(i++);
chr3 = input.charCodeAt(i++);

enc1 = chr1 >> 2;
enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
enc4 = chr3 & 63;

if (isNaN(chr2)) {
enc3 = enc4 = 64;
} else if (isNaN(chr3)) {
enc4 = 64;
}

output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2) +
keyStr.charAt(enc3) + keyStr.charAt(enc4);
} while (i < input.length);

return output;
}
}

new AlexaSiteStatsWidget().replaceScripts();

Nah rangkaian script tersebutlah yang membuat pemasangan widget Alexarank ini berpotensi memperberat loading blog, terutama bila kita menganalisanya dengan mempergunakan fasilitas Google PageSpeed Insights.

Selanjutnya berikut ini adalah solusi untuk membuat pemasangan widget Alexarank ini menjadi lebih ringan serta tidak menjadi beban loading blog.

Jadi silahkan pasang dulu widgetnya (Alexarank) di blog Anda dengan kode widget yang menggunakan Javascript (cara pemasangan standart). Setelah widgetnya tampil, silahkan klik kanan di atas gambar widgetnya lalu "Copy image URL" dan simpan dulu image URL-nya di notepad. Biasanya URL imagenya akan tampak seperti di bawah ini, saya contohkan URL image widget Alexa Info Blog.

http://xsltcache.alexa.com/site_stats/gif/s/a/aW5mb2Jsb2c5NzEuYmxvZ3Nwb3QuY29t/s.gif

Kemudian silahkan gunakan kode di bawah ini untuk menyimpan image gif widget Alexa-nya di blog kita.

<a href="http://www.alexa.com/siteinfo/yoursite.com" title="Alexa Site Stats Widget" rel="nofollow" target="_blank"><img src="IMAGE URL WIDGET ALEXA" width="LEBAR GAMBAR" height="TINGGI GAMBAR" alt="Alexa Site Stats" style="border:0;" title="Alexa Site Stats Widget"/></a>

Silahkan ganti yoursite.com dengan nama blog Anda kemudian ganti IMAGE URL WIDGET ALEXA dengan URL image gif yang tadi Anda simpan di notepad dan ganti juga lebar gambar dan tinggi gambarnya.

Contoh dari pemakaian script widget Alexarank yang saya pergunakan pada blog ini adalah seperti di bawah ini :

<a href="http://www.alexa.com/siteinfo/infoblog971.blogspot.com" title="Alexa Site Stats Widget" rel="nofollow" target="_blank"><img src="http://xsltcache.alexa.com/site_stats/gif/s/a/aW5mb2Jsb2c5NzEuYmxvZ3Nwb3QuY29t/s.gif" width='120' height='95' alt="Alexa Site Stats" style="border:0;" title="Alexa Site Stats Widget"/></a>

Demikianlah uraian saya tentang alternatif pasang widget Alexa (tanpa script) ini, semoga bermanfaat.