Cara memasang widget Histats dengan Hidden Tracker

Saya akan 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.

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.

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.

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&f=2.

 

sumber : http://www.kompiajaib.com/2014/03/memasang-widget-histats-ala-kompi-ajaib.html

Berbagi :