Kembali lagi dengan tutorial modifikasi widget statistik blog bawaan blogger,
dan modifikasi ini adalah versi kedua. Perbedaannya dengan modifikasi
versi pertama hanya terletak pada kode CSS adapun dari aspek desain:
Yang pertama menggunakan background gambar icons dan berbentuk vertikal,
sedangkan versi kedua ini hanya menggunakan background warna dengan
horizontal style. Atau seperti screenshot disamping:
Adapun Fitur dari widget statistik blog ini:
Fitur
- Menampilkan Jumlah postingan
- Menampilkan Jumlah Komentar
- Menampilkan Total Tayang Laman
Cara menambahkan widget statistis blogger ini ke blog
- Pada dasbor pilih menu Tata Letak
- Tambah Gadget --> Pilih widget Statistik blog
Pada kolom konfigurasikan widget, anda tidak perlu mengganti nama atau memilih tampilan, langsung klik simpan kemudian klik simpan setelan
- Sekarang masuk menu Template --> Pilih edit HTML
- Klik Ctrl+F dan cari kode ]]></b:skin>
- Kemudian letakkan kode CSS berikut diatas kode ]]></b:skin>
#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}
Anda bisa mengganti background, warna font pada kode CSS widget
statistik diatas agar sesuai dengan desain template blog anda.
- Klik Ctrl+F dan cari kode berikut:
<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>
- Setelah dapat, ganti kode tersebut dengan kode berikut:
<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>
Anda bisa mengganti tulisan yang memiliki background warna diatas dengan kata-kata anda sendiri
- Simpan template dan lihat hasilnya diblog anda.
Terimakasih.
Kunjungan balik dari blog bayu vai, lam kenal gan..
ReplyDeletewah mantep nih gan , tampilannya tambah keren
ReplyDeletedi coba ah... :)
ReplyDeletehttp://novimorfosis.blogspot.com/
mantapp dehh.. keren bgt..
ReplyDeletemantap nih,, keren banget sob tampilannya
ReplyDeletemakasih sob, udah sya coba, sebagian berhasil cuman di bagian pageviews ko ga muncul yah? http://hendyberbagi.blogspot.com/
ReplyDeletewah boleh di coba nih.. :D
ReplyDelete