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/AVvXsEi_clCS0fC44XPzrGbRSgEeyxoOeRCMSeAzPda8uZa2UmjojkDM3tYQV09WWrS2z9Y49Jy06oOXyhWQdpRrsnFFn4xITKpJeGkEHTmEja_il7KUrXgSwkC6DYENmVkVU1nr_1aZNDTHJtw/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>
>>> Simpan
template 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.