BLOGGINGPASURUAN mau share WIDGET baru nich… Namanya Widget Statistik. Widget statistik untuk blogger ini banyak macamnya sementara ini memang blogger menyediakan widget yang mungkin kurang menarik atau keren ( default ) , naa widget ini banyak disediakan oleh pihak ke tiga. Baik itu widget dari Sitemeter, Histats, Statcounter, Feedjit, Hitwebcounter dan masih banyak lagi. Widget statistik default blogger dari sisi artistik dan kelengkapan masih memiliki kekurangan karena belum memberikan data statistis yang lengkap seperti jumlah visitor karena hanya menampilkan jumlah total tayang laman, tetapi cukup untuk memantau perkembangan blog anda.
BLOGGINGPASURUAN kali ini ingin membagi Tutorial tentang cara modifikasi widget statistik default blogger dengan desaign keren. Dengan sedikit pengetahuan CSS anda bisa mengembangkan sendiri desain dari widget ini.
Fitur dari Widget modifikasi ini sebagai berikut :
1.Menampilkan Jumlah postingan
2.Menampilkan Jumlah Komentar
3.Menampilkan Total Tayang Laman
4.Penggunaan CSS Sprite
CSS sprite teknik yang digunakan untuk mempercepat loading blog ketika melakukan permintaan HTTP gambar. Dalam widget ini sepertinya terdapat 3 gambar ikon yang digunakan. Namun sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon.
Anda tertarik..? silahkan ikuti langkah-langkah berikut:
Cara menambahkan widget statistis blogger ini ke blog
>>> Pada dasbor pilih menu Tata Letak
>>> Tambah Gadget >>> Pilih widget Statistik blog
#Stats1
ul{margin:10px 0;border:0;padding:0}
#Stats1
li{margin:0;border:0;background-color:#ff4e47;background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDaNtVpKApvRTxrbNAeeqjLB2Pnd3gKbsG_rv39De0bggfogVyo051piJ6kPzvhD1jXkw2Qlw10JHv8GEp0F6t8OamAWPmfSjf_63gsq5NXA0Bk3txo02NCm9PwoG26VBF_XvItV-EuHo/s194/sprites-stats.png);background-repeat:no-repeat;padding:10px
10px 10px 80px;list-style-type:none}
#Stats1
h4{margin:0;font-size:22px;line-height:1.2em;color:#fff;text-shadow:none}
#Stats1
span{font-size:13px;color:#fff;text-shadow:none}
#totalComments{background-position:0 -68px}
#totalCount{background-position:0 -136px}
<b:widget id='Stats1' locked='false' title='Total tayangan laman' type='Stats'/>
Setelah ketemu, 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>
>>> Simpantemplate dan lihat hasilnya diblog anda.
Demikian tutorial BLOGGINGPASURUAN kali ini tentang Cara Menbuat Widget Statistik Blogger Bagian#1, dan pada kesempatan yang lain saya akan berusaha sharing juga modifikasi widget statistik bawaan blogger yang berbeda. Terimakasih.