Modifikasi Tampilan Widget Statistik Bawaan Blogger

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

• 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'>&amp;hellip;</h4>
          <span>Posts</span>
        </li>
        <li id='totalComments'>
          <h4 id='Stats1_totalComments'>&amp;hellip;</h4>
          <span>Comments</span>
        </li>
        <li id='totalCount'>
          <h4 expr:id='data:widget.instanceId + &quot;_totalCount&quot;'>&amp;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 Posts,Comments,dan Pageviews dengan kata-kata anda sendiri

 Simpan template dan lihat hasilnya diblog anda.

About the Author

Written by Admin

Previl_TM is a modern, template is very suitable for a template of your blog,and features a very cool and nice so from me, Predator Evil TM