Tampilan Statistik Blog Keren MS Design


Pada kesempatan kali ini Mas Design akan memberikan Tutorial Bagaimana Cara Membuat Custom Stats atau Tampilan Statistik Keren di Blogger. Dengan menggunakan widget ini, sobat akan dapat melihat Total Pageview, Tampilan Total Post dan Jumlah Komentar Blog kita. Untuk yang suka mengotak atik tampilan blog, saya sarankan untuk mencoba widget ini. Karena sebenarnya custom stats ini merupakan widget bawaan dari blogger, namun ada penambahan kode css untuk mempercantik tampilannya. Nah untuk sobat yang belum tahu dan penasaran seperti apa tampilan custom stats ini, silahkan cek di blog Mas Design ini, karena admin juga menggunakan widget ini.


Cara Membuat Tampilan Statistik Keren di Blog

Untuk memasang Widget Custom Stats ini cukup mudah, Pertama silahkan login ke Blogger > Tata Letak > Tambahkan Gadget > Pilih Statistik Blog > Simpan


Langkah selanjutnya cari kode berikut di Template > Edit Html

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

Kemudian ganti 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>

Langkah selanjutnya simpan kode CSS di bawah ini sebelum </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>

Langkah Terakhir Simpan dan lihat hasilnya.

Demikian tutorial Cara Membuat Tampilan Statistik Blog ini semoga bermanfaat bagi kita semua. untuk yang mengalami kesusahan dalam menerapkan Tutorial ini, silahkan tinggalkan komentar. Terima kasih.

Source : http://www.msdesignbd.com/2016/05/install-custom-stats-widget-for-blogger.html

Belum ada Komentar untuk "Tampilan Statistik Blog Keren MS Design"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Daftar Situs Idn Poker Online di 18Dewa dan juga Poker Qiu atau di sebut Pokerqiu adalah situs ceme online terpercaya sama dengan 18Dewapoker dan situs poker pkv yang terkenal adalah Masterdomino88 atau nama lain Domino88 bersaing di dunia game online poker Bandar389 dan poker idn lainnya yang memberikan kemenangan tinggi yaitu Big Poker88 baru lagi agen poker bernama Rekan Poker yang punya banyak peluang besar.