Widget statistik blog bawaan - Tampilan widget statistik blog bawaan dari blogger biasanya memang sangat sederhana. untuk itulah banyak yang kurang tertarik dengan widget bawaan dari blogger. Sekarang Waroenk Blog mencoba menjelaskan cara pemasangan modifikasi widget statistik blog bawaan blogger. Silahkan anda bandingkan gambar berikut. lebih bagus versi blogger apa versi yang sudah dimodifikasi? pasti lebih bagus yang sudah dimodifikasi.

widget statistik

Jadi jangan banyak pikir lagi, langsung saja ikuti langkah pemasangannya berikut ini.

Langkah Pertama.
Silahkan pasang widget statistik seperti biasanya, tanpa mengubah nama dan pengaturanya. jika masih "Pemula" belum bisa pasang widget statistik bawaan blogger silahkan baca : Cara Menambah Widget Blogger Statistik.

Langkah Kedua.
1. Silahkan pilih Kode modifikasi widget statistik bawaan blogger sesuai dengan background widget yang mau dipasang.

Background Putih

Kode untuk background terang atau putih :
#Stats1 ul {
    margin:10px 0;
    border:0;
    padding:0;
}
    margin:10px 0;
    border:0;
    padding:0;
}
#Stats1 li {
    border-left:4px solid #333;
    margin:0;
    border:0;
    background-color:#eee;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZM8wkZcA1gnfcYs3QeP_vhiBvnUrLA2y9wCIO4orlFC88qE_paIGhwPuAlTH3KZSqVwhObQJ9NzU6V6dBpRVSr75_whk_Cerru5IgK7_fQHk3HLiTsfaEUNN8oMH70uURqNjNzjWX6my/s1600/Statistik.png);
    background-repeat:no-repeat;
    padding:10px 10px 10px 80px;
    list-style-type:none;
}
    border-left:4px solid #333;
    margin:0;
    border:0;
    background-color:#eee;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZM8wkZcA1gnfcYs3QeP_vhiBvnUrLA2y9wCIO4orlFC88qE_paIGhwPuAlTH3KZSqVwhObQJ9NzU6V6dBpRVSr75_whk_Cerru5IgK7_fQHk3HLiTsfaEUNN8oMH70uURqNjNzjWX6my/s1600/Statistik.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:#333;
    text-shadow:none;
}
    margin:0;
    font-size:22px;
    line-height:1.2em;
    color:#333;
    text-shadow:none;
}
#Stats1 span {
    font-size:13px;
    color:#333;
    text-shadow:none;
}
    font-size:13px;
    color:#333;
    text-shadow:none;
}
#totalComments {
    background-position:0 -68px;
}
    background-position:0 -68px;
}
#totalCount {
    background-position:0 -136px;
}
    background-position:0 -136px;
}
Background Hitam

Kode untuk backgrund gelap atau hitam :

#Stats1 ul {
    margin:10px 0;
    border:0;
    padding:0;
}
#Stats1 li {
    border-left:4px solid #393939;
    margin:0;
    border:0;
    background-color:#393939;
    background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjFZM8wkZcA1gnfcYs3QeP_vhiBvnUrLA2y9wCIO4orlFC88qE_paIGhwPuAlTH3KZSqVwhObQJ9NzU6V6dBpRVSr75_whk_Cerru5IgK7_fQHk3HLiTsfaEUNN8oMH70uURqNjNzjWX6my/s1600/Statistik.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:#eee;
    text-shadow:none;
}
#Stats1 span {
    font-size:13px;
    color:#eee;
    text-shadow:none;
}
#totalComments {
    background-position:0 -68px;
}
#totalCount {
    background-position:0 -136px;
}
2. Pasang kode modifikasi widget statistik tepat diatas kode ]]></b:skin> Caranya :

  • Silahkan pilih Template kemudian klik Edit HTML, seperti pada gambar berikut:

  • Kemudian cari kode ]]></b:skin> dengan cara Ketik Ctrl+F copy paste kode ]]></b:skin> kemudian tekan enter, maka anda akan ditunjukan kode ]]></b:skin> dengan cepat.
  • Setelah ketemu pasang kode modifikasi widget statistiknya tepat diatas kode ]]></b:skin>
  • Simpan pengaturan anda dan ikuti langkah berikutnya. 

3. Setelah berhasil pasang kode diatas kemudian selanjutnya adalah cari kode widget statistik yang sudah terpasang. Caranya Cepatnya :

  • Silahkan klik tombol "Lompat ke widget" kemudian pilih "Stats1"

  • Kemudian akan muncul kode HTML Statistik seperti pada gambar berikut

  • Blog Kode tersebut seperti pada gambar diatas.
  • Selanjutnya GANTI kode yang sudah di Block dengan kode dibawah ini:
<b:widget id='Stats1' locked='false' title='Statistik' type='Stats'>
  <b:includable id='main'>
    <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>
  • Simpan pengaturan anda.
Sekarang langkah yang diperlukan apakah sudah anda ikuti dengan benar, jika sudah silahkan anda ikuti langkah berikutnya yakni pengecekan. Apakah sudah betul apa belum penempatanya. silahkan anda cek pada tampilan homepage blog anda. Jika sudah betul penempatannya maka anda telah berhasil memodifikasi widget statistik bawaan blogger menjadi tampil lebih baik.

Buat anda yang masih bingung dan butuh bantuan, silahkan anda tinggalkan komentar dibawah ini. Semoga artikel ini bermanfaat untuk anda.