Saturday, December 7, 2013
Browse »
home»
2
»
bawaan
»
blogger
»
modifikasi
»
statistik
»
tampilan
»
versi
»
widget
»
Modifikasi Tampilan Widget Statistik Bawaan Blogger Versi 2
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:
Terimakasih.
Modifikasi Tampilan Widget Statistik Bawaan Blogger Versi 2
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. Untuk kode warna, silahkan lihat disini
- 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.
Subscribe to:
Post Comments (Atom)
No comments:
Post a Comment