Cara Membuat Widget Statistik Custom Keren Dengan Total Post & Komentar

Mungkin ada yang bosan dengan tampilan widget total pageviews. Jika anda bosan dengan tempilan widget pageviews yang terkesan sederhana anda bisa mengganti tampilannya. Bahkan bisa menambahkan fitur atau tambahan data lainnya selali total pageviews. Seperti total postingan dan tital komentar.

Dengan tampilan designnya yang keren dan menarik maka akan membuat pengunjung tertarik untuk melihat widget total pageviews tersebut yang sudah dimodifikasi. Widget ini akan menampilkan data dengan jumlah keseluruhan halaman yang telah dibuka,jumlah total postingan artikel serta jumlah total komentar.

Untuk membuat widget menjadi tambah menarik maka ditambahkan font awesome didalamnya. Jika situs anda belum dipasang font awesome silakan pasang dulu supaya widget bisa tampil sempurna. Kita hanya akan mengganti html dan menambahkan css untuk membuat widget ini.Lalu bagaimana cara membuat widgetnya? Perhatikan langkah-langkah dibawah ini :

Cara Membuat Widget Statistik Custom

Langkah 1 : Silakan masuk ke blogger,pilih Tata Letak/Layout → Tambahkan Gadget → Statistik Blog (Silakan buat widget statistik blog)

Langkah 2 : Silakan masuk ke Template → Edit HTML,dan cari kode dibawah ini

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

Langkah 3 : Ganti kode yang dicari tadi dengan kode berikut

<b:widget id='Stats1' locked='false' title='Custom Stats' 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'>
    
    <div expr:id='data:widget.instanceId + "_content"' style='display: none;'>
      
      <b:if cond='data:showSparkline'>
        <img alt='Sparkline' expr:id='data:widget.instanceId + "_sparkline"' 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 + "_totalCount"'/>
      <b:else/>
        <span class='counter-wrapper text-counter-wrapper' expr:id='data:widget.instanceId + "_totalCount"'/>
      </b:if>
<script type='text/javascript'>
function postCount(json){
document.write(&quot;<span class='counts post2'> Total Posts &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 Comments &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;max-results=0&amp;callback=postCount' type='text/javascript'/>
<script src='/feeds/comments/default?alt=json-in-script&amp;max-results=0&amp;callback=numberOfComments'/>


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

Langkah 4 : Salin kode dibawah ini dan letakkan diatas kode </head>

<link href='//fonts.googleapis.com/css?family=PT+Sans:400,700' rel='stylesheet' type='text/css'/>
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/> 
<style type='text/css'>
/* Blogger Custom Stats widget by msdesignbd.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>

Lalu simpan template.

Selesai sekarang coba lihat blog sobat dan lihat apakah widget statistik anda sudah berubah wujud menjadi lebih keren. Cukup sekian tutorial yang bisa saya bagikan semoga bermanfaat.