Memasang Widget Histats Ala Kompi Ajaib

Memasang Widget Histats Ala Kompi Ajaib

Bola Hero Gawai

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

84 Comments Add Comment

saya yang ketiga saja deh itu memberatkan blog tidak ya kang .. ?

Balas

Makasih sist Cindy :)

Balas

Karena ini menggunakan script yang asynchronous dan tidak menggunakan gambar maka ini ringan ketimbang widget standarnya :)

Balas

mas kok setelah dipasang saya lihat stats saya kok nol ya mas ..

Balas

Tadi saya salah nulis postingannya, udah saya perbaiki, silahkan baca ulang postingannya mas :) maaf ya... :)
Jadi bikin widgetnya 2 kali, 1 widget hidden tracker dan satu lagi icon/gif.
Javascriptnya dari widget hidden tracker dan URL penayangnya dari widget icon/gif

Balas

sip sip mas sudah berjalan dengan baik statistik nya :)

Balas

Untuk tombolnya silahkan modifikasi lagi biar pas dengan tampilan blog :)

Balas

keren mas modifikasi histatsnya, bisa kita ksh rel nofollow sekalian donk mas, hehehe :D
makasih sharingnya :)

Balas

Mau pasang tapi sayang blog saya masih kurang bagus viewnya :(

Balas

Keren-keren Gan .. |o|

Balas

Iya mbak jadi bisa kasih rel nofollow pada linknya :)

Balas

Sama Kompi Ajaib juga mas belum bagus-bagus amat PV nya :)

Balas

Makasih mas :)

Balas

buat memperlihatkan statistik keramaian blog ya?
ooo iya gan cara biar font style di semua windows agar sama gimana
soalnya saya pake win 8 sedangkan saya buka blog di warnet pake win xp fontnya berbeda gan :(

Balas

mantap mas Adhy, langsung di coba dulu deh
thanks mas :D

Balas

Wahh ternyata widget Histats bisa juga ya di modif hehe
baru tau nih mas ... :)

Balas

pasti keren nih kang! dan tidak berat... hehe
makasih kang

Balas

Berkreasi lagi nih mas adi. Lanjutkan :D

Balas

Saya juga pake yang standard Kang, memang berat banget loadingnya apalagi pake yang Flash :)
Ntar kapan2 sayah coba deh Kang :)
Haturnuhun :-bd

Balas

wah,, bisa di modif sampai valid html5, keren mas, oh ya mas adhy, ada tutorial buat tombol next dan previous seperti blog ini mas?

Balas

Saya coba ah kang ... dah lama nih gak pasang widget2 populer

Balas

wah jadi nggak mengganggu loading blog kita yamas ardy,thanks banget tutornya mas,sangat bermanfaat nih

Balas

wah ilmu baru lagi :)
thx kang

Balas

Selain Keren dan tidak mengurangi fungsinya, loding blog jg tidak bertambah berat .... inovasi baru :-bd

Balas

Untuk tampilan blog itu dipengaruhi juga oleh browser yang digunakan mas dan OS yang dipakai juga berpengaruh. Untuk mengatasinya saya juga belum tahu mas :)

Balas

Silahkan mas diicip-icip :)

Balas

Hehehehe iya mas biar tidak trlalu menjadi beban blog :)

Balas

Betul mas menjadi tidak berat dibanding yang standar :)

Balas

Heheheh iya mas :)

Balas

Nah itu dia kang alasan saya untuk mencari cara agar widget ini menjadi ringan di blog :)

Balas

Hehhehe iya sis :)
Di Kompi Ajaib belum ada :) nanti saya coba bikin tutorialnya :)

Balas

Hehehehe mangga ka Ruly :)

Balas

Iya mas :)
Sama-sama mas :)

Balas

Sama-sama mas :)

Balas

Hatur nuhun mas :D

Balas

Betul mas :) Banyak loading blog berat yang diakibatkan oleh widget yang satu ini padahal keberadaannya lumayan diperlukan :)

Balas

hoho yang saya pake hidden tracker kang :D

Balas

Di save dulu kang, buat nanti kalo pengen pasang..:-)

Balas

wih keren pisan euy ,ijin coba kang

Balas

gan kalo yang ini gimana

Attribute imageanchor not allowed on element a at this point.
The align attribute on the div element is obsolete. Use CSS instead.

Lebih Lengkapnya lagi coba cek divalidator dan kasih saran memvalidkannya

Balas

Itu bahwa atribut imageanchor (imageanchor="1") tidak diperbolehkan di element a (link) solusinya hapus kode tersebut setiap upload gambar di postingan.

Itu berarti ada kode CSS di dalam div seperti ini misalnya <div align="center">. solusinya jika ada kode css dalam div silahkan gunakan style eperti contoh <div style="text-align: center">

Balas

makasih mas sharingnya
berarti harus dirubah ni yg lama

Balas

yah,harus ngoprek template lagi dong :D
makaih mas,segera saya perbaiki.

o ya maaf oot nih
untuk template kompi males,biar judul widget rata tengah...kode apa yg musti dirubah mas?

Balas

wah bagus banget nih, ide ide kreatifnya banyak bener deh, :)

Balas

Siipp :-d tapi jangan lupa ngambil scriptnya hidden tracker yang async kang :)

Balas

Silahkan mas :)

Balas

Begitulah jika ingin ringan loadingnya :)

Balas

Ganti kode text-align:left menjadi text-align:center pada kode ini mas
.sidebar1 h2,.sidebar3 h2{color:#555;font:16px Oswald;margin:0 auto;padding: 14px 26px;text-transform:uppercase;line-height: 100%;vertical-align: middle;text-align: left;transition: background 0.1s ease-in-out;background-color: #ddd}
.sidebar2 h2{color:#555;font:16px Oswald;margin:0 auto;padding: 14px 26px;text-transform:uppercase;line-height: 100%;vertical-align: middle;text-align: left;transition: background 0.1s ease-in-out;background-color: #ddd;position:relative}

Balas

Ide kreatif tidak selalu menciptakan sesuatu yang baru saja, namun membuat sesuatu yang telah ada menjadi lebih baik lagi adalah salah satunya juga :)

Balas

bisa dirubah sesuai kita yah mas adhy, keren pokonya :D

Balas

Betul mas tombolnya bisa dimodif sesuai dengan tema blog kita.

Balas

Mas Adhy memang sangat kreatif :-d

Balas

Jadi lebih keren tampilan widget Histats nya ya Kang Adhy
Saya coba dulu Kang Makash :)

Balas

saya mau tanya kang ?? apakah kalau saya ngirim artikel di panoramasia harus valid css3 sama HTML5 .. soalnya saya mau kirim artikel dengan konsep blogazine dgn tema budaya .. cuma saya sangsi dgn validasi css3 nya

Balas

mas adhy untuk pembuatan sitemap seperti blog ini bagaimana yah, boleh dunk bagi2 :)

Balas

walaupun saya sudah memasang histats di blog saya...namun tutorial yang ada di sini sangat membantu saya lebih memahami tentang fungsi histats itu sendiri....luarbiasa
keep happy blogging always...salam dari Makassar :-)

Balas

Hehehehe sakin puyeng cari bahan postingan mas :)

Balas

Iya kang... yang jelas widget ini menjadi tidak terlalu memberatkan loading blog.

Balas

Hehehehe wah makasih kang jika sudi mengirim postingan untuk Panoramasia :)
Karena itu saya khususkan untu blogazine... ga apa2 deh atau nanti saya lihat kode cssnya, jika aman untuk valid css3 nanti akan saya lakukan, jika tidak juga tidak apa-apa kang :). Kirim aja ke kontak saya kang beserta link profil penulisnya :)

Balas

Widget ini cukup lengkap fiturnya untuk melihat statistik blog jadi cukup berguna juga disimpan di blog apalagi jika kita menyediakan slot iklan sehingga dapat memudahkan para advertiser untuk melihat stat blog agar mereka tertarik untuk memasang iklan di blog kita.

Balas

waduh,,, blogku masih belum aku pasang mas.. :(
tapi kapan2 aku coba trik dari mas Adhi ini..terima kasih triknya mas.. :-bd

Balas

Kurang lebih hasilnya seperti ini kang
http://duniaradioku.blogspot.com/2013/11/jam-digital-dan-matahari.html
v saya baru cek chorme tau di mozila ??

Balas

nambah komentar biar ada respon dari kang adhy :D

Balas

wah visitornya rame banget :) kalah blog aku...hehehe..Kompi Ajaib makin OK !!

Balas

Sama-sama mas :)

Balas

Ah visitor KA masih sedikit mas :)

Balas

mantabf gan. gak terlalu berat. udah dipasang di blog ane |o|

Balas

semua yang disini diusahain tak pasang juga kang....
*nyengir kuda

Balas

histats yang udah terpasang ala kompi dirumah ngga valid kang, makanya tak lepasin lagi...kenapa ya?

Balas

Boleh dicoba pasang lagi kang biar saya bisa lihat kesalahannya? :)

Balas

Kang, mau tanya apakah cara ini bisa menyembunyikan statistik yang ada di Histats ?

Balas

Cara ini tidak menyembunyikan statistik di histats namun cara ini menghindari penggunaan image gif atau animasi yang menampilkan statistik di blog yang dapat mengganggu loading blog. Jika statistik di histats tidak ingin terlihat, coba setting statistiknya menjadi private.

Balas

disini ngga valis html5 nya kang

Balas
This comment has been removed by the author.

mo komen ge' gaptek euy...farah

Balas

Hehehee ga apa2 kang :) coba aja histats-nya pasang di blog akang sesuai tutorial di sini, nanti saya lihat di mana letak error-nya :)

Balas

Sebenarnya udah pernah mampir ke halaman ini, tapi males action karena ga ngerti waktu itu karena suntuk (alesan). Tapi sekarang sudah saya terapin ke blog, ane emang dah curiga kenapa loading blog berat kalao pake histats, kalo ngga dipasang rasanya ada yang kurang..

Balas

sip kang berhasil...makasih ya......
Oh iya, supaya margin nya menjadi center kyk punya akang, gimana tuh caranya???

Balas
Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • 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 Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×