Cara Modifikasi Widget Statistik Blog di Blogger - Menambahkan Fitur Total Artikel dan Komentar

Cara Modifikasi Widget Statistik Blog di Blogger - Menambahkan Fitur Total Artikel dan Komentar

Cara modifikasi widget statistik blog di blogger, merupakan hal yang akan kita bahas hari ini.

Widget statistik blog di blogger, berfungsi untuk menampilkan tampilan total tayangan halaman atau total pageviews saja di blog kalian. Hal ini menjadikan widget ini jarang dipakai oleh para blogger, dimana fungsinya yang kurang efisien.

Memodifikasi Widget Statistik di Blog

Mengenai hal itu, disini Saya akan mencoba memodifikasi widget tersebut, dengan menambahkan 2 fitur didalamnya, yakni menampilkan total artikel dan total komentar. Dengan demikian, widget ini akhirnya memiliki 3 fitur, yaitu menampilkan total tayangan halaman/pageviews, total komentar, dan total artikel blog kalian.

Untuk tutorialnya, kalian simak saja artikel berikut.

Cara Modifikasi Widget Statistik Blog di Blogger

  • Login ke akun blogger kalian dulu.
  • Kemudian, kalian klik Tata Letak => Tambahkan Gadget => pilih Statistik Blog.
  • Setelah itu, kalian pergi ke opsi Tema => Edit HTML => cari (Ctrl+ F) saja kode ini <b:widget id='Stats1' , hapus kode seperti pada gambar dibawah.
Cara Modifikasi Widget Statistik Blog di Blogger - Menambahkan Fitur Total Artikel dan Komentar
  • Lalu, kalian ganti dengan kode berikut 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> 
  • Kemudian, kalian pastekan kode CSS & HTML dibawah ini sebelum kode </head> dan Simpan.
<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;display:block;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>  

Penutup Artikel Cara Modifikasi Widget Statistik Blog di Blogger

Sekian artikel tentang cara modifikasi widget statistik blog di blogger. Jika kalian menyukai artikel ini, jangan lupa untuk membagikannya ke media sosial kalian. Terimakasih sudah berkunjung.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel