-->

Cara Install Widget Custom Statistik Untuk Blogger

January 08, 2017
Advertisemen
Assalamualaikum,

Dalam postingan ini, saya akan berbagi tutorial dengan Anda bagaimana mengkostum widget Statistik blogger. Dengan menggunakan widget ini, Anda dapat menampilkan total tampilan halaman, total posting dan jumlah komentar pada blog Anda. Hanya platform blogger saja yang memiliki widget pageviews didalamnya.

Setelah itu, saya akan mengubah beberapa css dan menambahkan beberapa script untuk total posting dan jumlah komentar. Desain widget ini keliatan modern dan bersih.

Saya memakai beberapa ikon, dilengkapi font yang mengagumkan.Instalasi kustom Statistik widget ini sangat berguna untuk sobat blogger.

Ini adalah desain yang sangat unik dan cerdas. Beberapa teman meminta saya untuk berbagi widget blogger ini. Dan sekarang saya akan berbagi dengan tampilan baru dan satu fitur tambahan lainnya.

Widget blogger ini membantu Anda untuk menampilkan Total tampilan halaman, komentar dan total postingan blog Anda. Orang-orang yang ingin membuat blog mereka lebih menarik dan indah, beberapa widget blogger membuat merekalebih mudah.

 Demo 

Cara Memasang Widget Kustom Statistik Blogger

Berikut ini adalah beberapa langkah sederhana untuk dapat menginstal widget blogger kustom Statistik. Di widget blogger ini saya menggunakan ikon mengagumkan font dan font PT Sans google. Maka Anda juga perlu menambahkan font ini di blog Anda.


Langkah 1: Pergi ke Tata letak > Tambah Gadget > Statistik Blog menambahkan widget ini.


Langkah 2: Sekarang pergi ke Edit HTML dan cari kode di bawah ini.

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

Sekarang ganti kode diatas dengan script 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> 

Sudah 80% selesai. Selanjutnya Menyisipkan semua 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>

Yess sekarang sudah selesai. langkah terakhir tinggal klik  Save template  dan melihat hasilnya dengan menyegarkan halaman di browser anda.

Jika Anda memiliki masalah, maka jangan ragu untuk bertanya dengan mengisi kotak komentar dibawah. jangan lupa juga untuk berbagi posting ini di media sosial Anda. Dukungan Anda adalah masa depan untuk saya. Terima kasih telah berkunjung.

BACA JUGA


(RA/Sn)
Advertisemen

Add Comments

Disqus Comments