Cara Memasang Widget Custom Statistik Di blog

Pada postingan kali ini saya akan berbagi cara memasang Widget Custom statistik pada blog.

Manfaatnya Widget Custom statistik adalah kita bisa menampilkan total halaman yang ditampilkan/page view,jumlah postingan dan jumlah komentar pada blog kalian.

Bagaimana cara memasang widged custom statistik ?
Berikut adalah beberapa langkah sederhana untuk memasang Widget statistik pada blog.

1. Pertama kalian buka Tata Letak> Tambah Gadget> Blogspot stat's. Lihat gambar

2. Tahap selanjutnya pergi ke Edit HTML lalu cari kode berikut :

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

3. Setelah ketemu sekarang kalian ganti kode di atas 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'>
    <!-- Content is going to be visible when data will be fetched from server. -->
    <div expr:id='data:widget.instanceId + "_content"' 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 + "_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("<span class='counts post2'> Total Posts ");
var count = json.feed.openSearch$totalResults.$t;
document.write("<span class='count'>" + count + "</span>");
document.write("</span>")
}

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

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


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

4. Kemudian kalian cari lagi kode </head> lalu pastekan kode berikut tepat di bawahnya.

<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:"Page Views";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:"\f06e";}
.counts.post2:before {content:"\f044";}
.counts.comment:before {content:"\f0e6";}
#Stats1_content {width:auto;height:auto;background-color:#fff;}
</style>

5. Selesai , sekarang kalian save kemudian lihat hasilnya pada blog sobat.

Baiklah sekian dulu postingan kali ini semoga bermanfaat dan menambah wawasan untuk sobat ataupun teman teman sekalian.

Unknown 8:45 AM Komentar

Related Posts

Cara Memasang Widget Custom Statistik Di blog

4/ 5

Oleh Unknown