Modifikasi Widget Statistik Blogger Jadi Lebih Keren

Blogger widget statistik
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:
  1. Menampilkan jumlah postingan
  2. Menampilkan jumlah komentar
  3. 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. . ! !
Statistik blog
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'>&amp;hellip;</h4> <span>Posts</span> </li> <li id='totalComments'> <h4 id='Stats1_totalComments'>&amp;hellip;</h4> <span>Comments</span> </li> <li id='totalCount'> <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;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

Disclaimer : Gambar,Link download atau video pada artikel di website ini terkadang berasal dari berbagai sumber media lain. Hak cipta sepenuhnya dipegang oleh sumber tersebut.

3 Comment

Anonymous delete 10/02/2013

Bro kenapa Komentar sama postnya kosong

Mksudbya gimana broo. . ? ? :-?

artikel yang keren gan! Saya mau tanya cara buat kotak komentar bertingkat kayak blog ini. Saya mau coba untuk blog saya komchar.blogspot.com

NO SPAM :
Komentar memasukan link aktif tidak akan di tampilkan atau terhapus secara otomatis.
EmoticonEmoticon

Contact Us

Name

Email *

Message *