Alternatif Lain Pasang Widget Alexa Tanpa Javascript

Setelah Anda memasang widget Alexa dengan javascript seperti pada postingan sebelumnya, kini saya share juga alternatif lain cara memasang widget Alexa Rank di blog tanpa menggunakan javascript agar menjadi tidak terlalu membebani loading blog oleh javascript.

Di sini kita hanya menggunakan image gif yang dihasilkan dari javascript widget Alexa dan dengan image pula maka kode untuk membuka halaman Alexa pada jendela baru pada link-nya akan berfungsi. Begitu juga dengan gambar maka kita bisa memberikan image dimensions untuk gambar widget Alexa yang hilang ketika dicek di GTMetrix.


Untuk mengambil gambar gif widget Alexa, kini kita tidak bisa mendapatkannya di halaman widget pada web Alexa yang sekarang ini (th. 2014). Jadi kita harus terlebih dahulu memasang widget Alexanya dengan menggunakan javascript seperti pada postingan sebelumnya di bawah ini.


Jadi silahkan pasang dulu widgetnya di blog Anda dengan kode widget yang menggunakan javascript. Setelah widgetnya tampil, silahkan klik kanan di atas 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 Kompi Ajaib.

URL image Alexa

URL image yang didapat tampak seperti di bawah ini


http://xsltcache.alexa.com/site_stats/gif/s/a/d3d3LmtvbXBpYWphaWIuY29t/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.

Gambar 1: Dari URL image gif widget Alexa seperti di bawah ini akan tampil gambar seperti di bawahnya.

http://xsltcache.alexa.com/site_stats/gif/s/a/d3d3LmtvbXBpYWphaWIuY29t/s.gif 
Dimensi gambar: width="120" dan height="95" 

widget Alexa 1

Gambar 2: Dengan mengganti huruf a dengan huruf b, maka akan tampak widget Alexa seperti di bawah ini.

http://xsltcache.alexa.com/site_stats/gif/s/b/d3d3LmtvbXBpYWphaWIuY29t/s.gif 
Dimensi gambar: width="120" dan height="240"

widget Alexa 2

Gambar 3: Dengan mengganti huruf a dengan huruf c, maka akan tampak widget Alexa seperti di bawah ini.

http://xsltcache.alexa.com/site_stats/gif/s/c/d3d3LmtvbXBpYWphaWIuY29t/s.gif 
Dimensi gambar: width="468" dan height="60"

widget Alexa 3

Jika Anda tidak ingin menampilkan Links in di dalam widgetnya maka silahkan ganti huruf s menjadi huruf t.

Jadi secara lengkap contoh kode widget Alexa Kompi Ajaib dengan Links in dan dengan lebar dan tingginya 120px dan 95px akan tampak seperti di bawah ini dan akan tampak seperti Gambar 1 di atas.


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

Semoga bisa dimengerti dan selamat mencoba.

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments