Cara Pasang Widget Statistik

@yuliastutirini on

Tuesday, February 7, 2017

Statistik dengan desain seperti gambar dibawah ini biasanya bisa kita temukan di platform Wordpress, namun sekarang juga dapat memasangnya di Platform Blogger. Bisa kita melihat pada gambar di atas ada PageView, Total Posts, dan Total Comments yang tentu akan membantu untuk mengetahui statistic pada blog. Langsung saja simak tutorial dibawah ini untuk memasang widget ini pada blog.

# Step 1: Buka Blogger.com > Tata Letak > Tambahkan Gadget > Pilih Statistik Blog > SIMPAN

# Step 2: Buka Template > Edit HTML dan Code Ini

<b:widget id='Stats1' locked='false' title='Custom Stats' type='Stats' version='1' visible='true'>...</b:widget>
Setelah Ketemu Silahkan Hapus & Ganti Kode Diatas Tersebut Dengan Kode Dibawah 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>

Baca Juga : Keuntungan Memakai Form Comment Disqus Untuk Blog

# Step 3: Cari Kode </HEAD>, Lalu Masukkan Kode Bawah ini 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>

# Step 4: Setelah itu silahkan Save Template dan Lihat Hasilnya

Bila masih mempunyai kesulitan atau ingin bertanya silahkan letakkan komentar dibawah.

.......... Baca Juga ...........

Bagikan Artikel ini

Labels: Blogger, Tulisan Jeffrie

Thanks for reading Cara Pasang Widget Statistik . Please share...!