Memasang Widget Histats Ala Kompi Ajaib

Widget Histats Ala Kompi Ajaib
Histats adalah salah satu web penyedia jasa penampil data statistis dari sebuah web dengan fitur yang cukup lengkap. Histats juga menyediakan widget untuk dipasang di web penggunanya dengan banyak macamnya.

Dan sebagai pengguna, kita harus pintar-pintar memilih dan menyaring widget dari pihak ketiga yang keberadaannya benar-benar diperlukan blog kita seperti halnya Histats sebagai penampil data statistik blog.

Jika blog Anda menyediakan slot iklan mandiri, maka salah satu widget yang diperlukan adalah widget penampil data statistik untuk memudahkan para advertiser melihat statistik blog kita untuk memastikan bahwa mereka akan memasang iklan pada blog yang benar sesuai keinginan mereka. Salah satu widget ini adalah widget Histats.

Sebagai saran saya, gunakan widget Histats yang menggunakan asynchronous untuk keamanan loading blog kita. Nah untuk itu kini saya share cara memasang widget Histats dengan Hidden Tracker asynchronous dan memodifikasi tampilan tombol untuk mengakses web penayang statistiknya dengan tidak menggunakan gambar namun dengan CSS sehingga lebih ramah loading blog.

Namun di sini saya tidak akan menjelaskan cara mendaftarkan blog Anda di Histats, karena saya yakin Anda semua pasti bisa dan saya anggap Anda sudah mendaftarkan blog Anda di Histats.

Silahkan login ke akun Histats Anda kemudian klik tombol Counter Code dan kemudian "Add new counter". Silahkan pilih widget dengan "Hidden Tracker" lalu save widgetnya. 

Kemudian silahkan klik widget "Hidden Tracker" yang barusan Anda pilih untuk mendapatkan kodenya dan pilih widget "async". Silahkan copy hanya kode javascriptnya saja seperti pada gambar di bawah ini yang saya blok biru.

Kode Javascript Histats

Silahkan paste kode javascriptnya pada notepad.

Kemudian "Add new counter" lagi. Silahkan pilih widget dengan "icon/gif" lalu save widgetnya. Kemudian klik pada widget yang barusan dibuat lalu klik pada widget "No Javascript" untuk mendapatkan URL web penayang statistiknya seperti pada gambar di bawah ini yang saya blok biru.

Kode No-Javascript Histats

Kemudian silahkan paste URL-nya di notepad. 

Nah untuk menyimpan widget Histats ini di blog, silahkan gunakan kode di bawah ini dan simpan di gadget HTML/JavaScript di sidebar blog Anda.


<style type="text/css" scoped>
.histats {
    background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #d9d9d9 100%);
    border:1px solid #eee;
    border-radius:4px;
    margin:0 auto;
    padding:0 3px;
    width:64px;
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1.2em;
    color:#666;
    text-shadow:0px 1px 0px #fff;
}
.histats:hover {
    background: linear-gradient(to bottom, #d9d9d9 0%, #f6f6f6 47%, #ffffff 100%);
}
</style>
<script type="text/javascript">
JAVASCRIPT WIDGET HIDDEN TRACKER YANG TADI ANDA COPY
</script>
<a href="URL WEB PENAYANG STATISTIK HISTATS DARI WIDGET ICON/GIF NO JAVASCRIPT" target="_blank" rel="nofollow" title="Stat Counter"><span class="histats">Histats.com</span></a>

Sehingga penampakannya kira-kira seperti contoh kode di  bawah ini.


<style type="text/css" scoped>
.histats {
    background: linear-gradient(to bottom, #ffffff 0%, #f6f6f6 47%, #d9d9d9 100%);
    border:1px solid #eee;
    border-radius:4px;
    margin:0 auto;
    padding:0 3px;
    width:64px;
    display:block;
    font-size:13px;
    font-weight:700;
    line-height:1.2em;
    color:#666;
    text-shadow:0px 1px 0px #fff;
}
.histats:hover {
    background: linear-gradient(to bottom, #d9d9d9 0%, #f6f6f6 47%, #ffffff 100%);
}
</style>
<script type="text/javascript">
var _Hasync= _Hasync|| [];
_Hasync.push(['Histats.startgif', '1,26222,4,800,"undefined"']);
_Hasync.push(['Histats.fasi', '1']);
_Hasync.push(['Histats.track_hits', '']);
(function() {
var hs = document.createElement('script'); hs.type = 'text/javascript'; hs.async = true;
hs.src = ('http://s10.histats.com/js15_gif_as.js');
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(hs);
})();</script>
<a href="http://www.histats.com/viewstats/?SID=26222&f=2" target="_blank" rel="nofollow" title="Stat Counter"><span class="histats">Histats.com</span></a>

Dan perhatikan pada URL web penayang statistiknya biasanya akan terdapat kode & dalam URL-nya seperti berikut ini http://www.histats.com/viewstats/?SID=26222&f=2. Kode & tersebut akan error pada validasi HTML5, untuk itu silahkan tambahkan kode amp; pada kode & tersebut sehingga menjadi seperti ini http://www.histats.com/viewstats/?SID=26222&amp;f=2.

Demo tombolnya seperti berikut ini: DEMO TOMBOL HISTATS atau silahkan lihat di sidebar Kompi Ajaib (jika saya masih menggunakannya, hehehehe).

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