Memasang Widget Custom Stats di Blog

Di postingan ini, saya akan berbagi dengan widget custom stats blogger .Dengan menggunakan widget ini anda bisa menampilkan total tampilan halaman, total postingan dan total komentar blog anda.

Desain widget ini modern dan clean atau bersih. Saya menggunakan beberapa icon dengan font yang menarik. Memasang widget custom stats ini sangat berguna untuk tampilan blogger. Pada template saya sendiri juga menggunakan widget ini.

Desainnya sangat unik dan flat. Beberapa teman meminta saya untuk berbagi widget blogger ini. Setelah waktu itu sekarang saya berbagi dengan tampilan baru dan satu lagi fitur tambahan. Widget blogger ini membantu Anda untuk menampilkan total tampilan halaman, komentar dan total posting blog Anda. Orang yang ingin membuat blog mereka lebih atraktif dan cantik.

Cara memasang widget custom stats blogger

Berikut adalah beberapa langkah yang sederhana untuk memasang widget custom stats blogger. Di widget blogger ini saya menggunakan font awesome icons dan font font PT Sans. Jadi Anda juga perlu menambahkan font ini pada blog Anda. Jika font sudah anda tambahkan di blog anda sejak dulu, maka tidak perlu lagi memasangnya agar tidak double.

Langkah 1: Buka Tata Letak > Tambahkan Gadget > Tambahkan Widget Statistik Blog.

Langkah 2: Sekarang masuk ke Edit HTML dan temukan kode di bawah ini.

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

Sekarang ganti kode di atas dengan kode di bawah ini.

<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'>
    <!-- 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 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;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>

Sampai di sini sudah hampir selesai. Sekarang paste kan semua kode CSS di bawah ini sebelum 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>

Sekarang sudah selesai. Simpan template dan lihat hasilnya.

Semoga anda berhasil, bagaimana cara menambahkan widgets custom stats di blogger atau situs blogger. Jika Anda memiliki masalah, maka silahkan berkomentar. Jika Anda menyukai widget ini, maka jangan lupa untuk share posting ini. Terima kasih.