Modifikasi Widget Statistik Blogger Jadi Lebih Keren

Banyak ragam widget statistik untuk blogger yang disediakan oleh pihak ke tiga. Baik itu widget dari Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter dan segudang layanan widget statistik lainnya. Adapun widget statistik default dari blogger meskipun masih memiliki kekurangan karena belum memberikan data statistis yang lengkap seperti jumlah visitor karena hanya menampilkan jumlah total tayang laman saja, tetapi cukup untuk memantau perkembangan blog anda.

Tutorial kali ini tentang cara modifikasi widget statistik default blogger agar terlihat lebih keren dari aspek desain. Tentu dengan pengetahuan CSS anda bisa mengembangkan lagi desain dari widget ini.

Fitur dari widget statistik ini adalah:

Menampilkan jumlah postingan
Menampilkan jumlah komentar
Menampilkan total tayang laman

Nah jika anda tertarik Untuk memasang widget statistik ini pada blog anda,ikuti cara-caranya dibawah ini simple dan gak rumit. . :)

Masuk ke dasbord blogger>>pilih menu tata letak
Tambah gadget>>Pilih widget statistik blog
Lebih jelasnya lihat gambar dibawah. . ! !

Pada kolom kongfigurasi,anda tidak perlu mengganti nama widget atau memilih tampilan widget statistik,langsung klik "SIMPAN" kemudian klik "SIMPAN SETELAN".

Kalau sudah sekarang masuk ke menu tempelate>>edit HTML
Copy Kode dibawah ini dan pastekan tepat diatas ]]></b:skin> pada tempelate anda.


#Stats1 ul{margin:0px 0;border:0;padding:0}
#Stats1 li{display:inline;width:28%;margin:0;border:0;background-color:#fff;background:#0090D5;color:#fff;float:left;padding:5px 7px;text-decoration:none;text-shadow:none;margin:0 1px 1px 0;font-size:12px;list-style-type:none}
#Stats1 h4{margin:0;font-size:18px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1 span{font-size:12px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}

Sesuaikan sendiri Code CSS diatas,anda bisah mengubah kode warna Background dan kode warna font widget statistik,agar sesuai dengan tampilan warna yang anda inginkan. .

Kalau sudah sekarang cari kode dibawah ini

<b:widget id='Stats1' locked='false' title='total tayang laman' type='stats'/>

Jika sudah ketemu ganti kode diatas dengan kode dibawah ini

<b:widget id='Stats1' locked='false' title='' type='Stats'> <b:includable id='main'> <b:if cond='data:title'><h2><data:title/></h2></b:if> <div class='widget-content'> <ul> <li> <h4 id='Stats1_totalPosts'>&hellip;</h4> <span>Posts</span> </li> <li id='totalComments'> <h4 id='Stats1_totalComments'>&hellip;</h4> <span>Comments</span> </li> <li id='totalCount'> <h4 expr:id='data:widget.instanceId + "_totalCount"'>&hellip;</h4> <span>Pageviews</span> </li> </ul> <script type='text/javascript'> //<![CDATA[ function totalPosts(json){document.getElementById('Stats1_totalPosts').innerHTML=json.feed.openSearch$totalResults.$t};function totalComments(json){document.getElementById('Stats1_totalComments').innerHTML=json.feed.openSearch$totalResults.$t};document.write('<script type=\"text/javascript\" src=\"/feeds/posts/default?alt=json-in-script&max-results=0&callback=totalPosts\"><\/script><script type=\"text/javascript\" src=\"/feeds/comments/default?alt=json-in-script&max-results=0&callback=totalComments\"><\/script>'); //]]> </script> </div> </b:includable> </b:widget>

Selesai Simpan dan lihat hasilnya. . :D