Menambah Widget Statistik di Blog

Ketika kalian menambah widget statistik di blog, pada umumnya tampilan statistiknya hanya itu-itu saja alias masih tampilan default dari google, dan bosan terlihat oleh orang lain.
Disini saya menemukan widget statistik ini yang sudah di custom, dan tampilannya seperti gambar dibawah ini.

Atau untuk demonya kalian bisa lihat pada blog saya ini.
Seiring waktu bisa aja saya lepas widget ini.

Berhubung saya bukan seorang blogger yang suka membuat artikel harus dengan minimal 500 kata, jadi tanpa perlu basa basi lagi, langsung saja saya ke pointnya.

Tahap Pertama

1. Login ke Blog kalian
2. Pilih Tata Letak > Tambahkan Gadget
3. Pilik Statistik Blog, lalu pilih gambar no.2 dan simpan. (Lihat Gambar dibawah)

Tahap Kedua

4. Pergi ke Template / Tema > Edit HTML
5. Kemudian cari tag dibawah ini.

<b:widget id='Stats1' locked='false' title='Total Penayangan Laman' type='Stats' version='1' visible='true'>...</b:widget> 

6. Ganti tag widget tersebut dengan tag dibawah ini.

   <b:widget id='Stats1' locked='false' title='Statistik' type='Stats' version='1' visible='true'>
    <b:includable id='main'>
  <b:if cond='data:title'><h2><data:title/></h2></b:if>
  <div class='widget-content'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + &quot;_content&quot;' style='display: none;'>
      <!-- Counter and image will be injected later via AJAX call. -->
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + &quot;_sparkline&quot;' height='30' src='http://2.bp.blogspot.com/-nsxCtkYnchQ/VLEifAyf97I/AAAAAAAAIlk/9Viyy0W9r04/s1600/FFF.png' title='Sparkline' width='75'/>
      </b:if>
      <b:if cond='data:showGraphicalCounter'>
        <span class='counter-wrapper graph-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + &quot;_totalCount&quot;'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Total Artikel &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

function numberOfComments(json){
document.write(&quot;<span class='counts comment'> Total Komentar &quot;);
var count = json.feed.openSearch$totalResults.$t;
document.write(&quot;<span class='count'>&quot; + count + &quot;</span>&quot;);
document.write(&quot;</span>&quot;)
}

</script>
<script src='/feeds/posts/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;amp;max-results=0&amp;amp;callback=numberOfComments'/>


    </div>
  </div>
</b:includable>
  </b:widget> 

7. Dan tambahkan CSS dibawah ini sebelum </head>

<style type='text/css'>
/* Statistik widget www.myabdurrahim.com */
.Stats img {display:none!important;background-image:none;}
.Stats .counter-wrapper {width:92%;text-align:right;margin:10px;line-height:35px;color:#333;font-weight:700;font-size:16px;margin-left: 0;}
.Stats .counter-wrapper:after {content:&quot;Page Views&quot;;float:left;text-align:left;font-size:13px;font-weight:700;color:#333;}
.counts {display:inline-block;width:92%;font-size:13px;line-height:35px;color:#333;font-weight:700;}
.counts .count {display:inline-block;font-size:16px;height:30px;
vertical-align:top;direction:ltr;float:right;color:#333;font-weight:700!important;}
.counts:hover .titles:before {color:#333!important;border-radius:2px;border-color:rgba(255,255,255,0.1);}
.counter-wrapper.text-counter-wrapper:before, .counts:before {display:inline-block;font-size:13px;font-family:FontAwesome;font-style:normal;font-weight:normal;margin:0 10px 0 10px;float:left;width:10px;text-align:center;}
.counter-wrapper.text-counter-wrapper:before, .counts:before {
display:block;background-color:#fff;color:#333;width:35px;height:35px;font-size:18px;line-height:35px;border-radius:2px;margin:0px 8px 0 0;}
.counter-wrapper.text-counter-wrapper:before {content:&quot;\f06e&quot;;}
.counts.post2:before {content:&quot;\f044&quot;;}
.counts.comment:before {content:&quot;\f0e6&quot;;}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>

8. Statistik ini menggunakan fontawesome untuk menampilkan icon-nya, jadi jika kalian belum ada fontawesome pada blog kalian, kalian bisa menambah fontawesome dibawah ini ke dalam blog kalian.

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>

9. Simpan dan lihat blog kalian.
Kalian juga bisa memodif tampilannya dengan mengubah CSSnya saja.

Ok, sampai disini saja artikel kali ini, kalau ada masalah terkait pembahasan pada artikel ini, silahkan tinggalkan pertanyaan kalian di kolom komentar, Terimakasih.