Modifikasi Tampilan Widget Statistik Blogger Versi 1

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 blogger meskipun 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.

Tutorial kali ini saya ingin mengetengahkan cara modifikasi widget statistik default blogger agar terlihat lebih indah dari aspek desain. Tentu dengan pengetahuan CSS anda bisa mengembangkan lagi desain dari widget ini.

Fitur

• Menampilkan Jumlah postingan
• Menampilkan Jumlah Komentar
• Menampilkan Total Tayang Laman
• Penggunaan CSS Sprite

CSS sprite teknik keren yang digunakan untuk mempercepat loading blog ketika melakukan permintaan HTTP gambar. Dalam widget ini mungkin anda berfikir terdapat 3 gambar ikon yang digunakan. Sebenarnya hanya ada satu gambar yang digunakan yang berisi semua ikon. Teknik ini tidak umum diblogger tapi sangat sering digunakan pada blog worpress.

Baiklah silahkan ikuti langkah-langkah berikut:

Cara menambahkan widget statistis blogger ini ke blog

• 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:10px 0;border:0;padding:0}

#Stats1
li{margin:0;border:0;background-color:#ff4e47;background-image:url(http://lh3.ggpht.com/-JypPIDhQgEY/UIfUN_w0jkI/AAAAAAAABOM/s_O3VHyQSlw/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}

• Klik Ctrl+F dan cari 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'> … </ h4>
          <span> Posts </span>
        </ Li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'> … </ h4>
          <span> Comments </span>
        </ Li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + "_totalCount"'> … </
h4>
          <span> Pageviews </span>
        </ Li>
      </ Ul>
      <script type='text/javascript'>

/ / <! [CDATA [ function type = \ "text / javascript \" src = \ "/ feeds / posts / default? alt = json-in-script & max-results = 0 & callback = totalPosts \"> <\ / script> <script type = \ "text / javascript \ " / /]]>
      </ Script>
    </ Div>
  </ B: includable>
</ B: widget> 

• Simpan template dan lihat hasilnya diblog anda.

Demikian tutorial kali ini, insyaAllah pada kesempatan yang lain saya akan sharing juga modifikasi widget statistik bawaan blogger yang berbeda. Terimakasih.