Membuat Counter Penghitung Jumlah Tampilan Post Pada Blogspot

Live Demo

Counter penghitung jumlah tampilan posting pada blogspot atau bisa di sebut juga dengan penghitung jumlah tampilan post, jumlah page views postingan, post views counter.
Dengan ini semua orang dapat mengetahui sebuah artikel blog telah di baca dan dilihat sebanyak berapa kali.

Atau bisa juga untuk menunjukan seberapa populer sebuah artikel.
Cara membuat post view counter blogger ini lumayan rumit tapi sebenarnya sangat mudah jika kamu mengerti, apa lagi yang sudah terbiasa dengan code-code.

1. Pertama
Silahkan mendaftar terlebih dahulu di https://www.firebase.com

2. Create New App
Masukan nama app ini nantinya akan jadi url app firebase kamu dan Create new app Lihat gambar

3. Ambil URL Firebase
Ambil URL Firebase contoh https://kampung-bodoh.firebaseio.com
Lihat gambar jika bingung

4. Tambahkan Kode CSS
Tambahkan kode CSS berikut di atas ]]></b:skin> template sobat

    /*-------- Post Views ----------*/
    #views-container {
    width: 85px;
    float: right;
    }

    .mbtloading {
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkneeEuwAYDHdcjrB4O4FaPDiKoYOpR208jMJJzyyfLo1mKsJ8Ucmtut3SUCAWFWbDKLil3xR3pF6nCZabo4X7AIYRi71YBmdSHgPqZZTg9kKnCNAKnxyVz0Ny7bN9Oe8NGMTq_6M3Lxrl/s320/mbtloading.gif') no-repeat left center;
    width: 16px;
    height: 16px;
    }

    .viewscount {
    float: right;
    color: #EE5D06;
    font: bold italic 14px arial;
    }

    .views-text {
    float: left;
    font: bold 12px arial;
    color: #333;
    }

    .views-icon{
    background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiS57RLXZ8DezZtgMAUbnLOtL8xpwihrAfWgsUkz9TAkU-U-MXYHBPbR090qq2on8O4ec2O-635Mgw11j_maoYwwE565ebBgas-rlGcdJ_WXGxtqxxzlYT9p6syQI9xoCRflODSyjS786-s/s1600/postviews.png') no-repeat left;
    border: 0px;
    display: block;
    width: 16px;
    height: 16px;
    float: left;
    padding: 0px 2px;
    }

5. Tambahkan HTML
Tambahkan kode berikut di atas kode <body>

<script type='text/javascript'>
    window.setTimeout(function() {
        document.body.className = document.body.className.replace('loading', '');
      }, 10);
</script>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
$.each($('a[name]'), function(i, e) {
var elem = $(e).parent().find('#postviews').addClass('mbtloading');
var blogStats = new Firebase("https://kampung-bodoh.firebaseio.com/pages/id/" + $(e).attr('name'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('name');
isnew = true;
}
elem.removeClass('mbtloading').text(data.value);
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
</script>

Ganti https://kampung-bodoh.firebaseio.com/ dengan url firebase sobat tadi.

5. Tambahkan Kode berikut di bawah <head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'></script>

6. Terakhir
Masukan kode berikut di bawah atau pun di atas kode <data:post.body/> nomor 2 atau <data:post.body/> 1 atau <data:post.body/> 3 cobakan saja satu persatu karna kode <data:post.body/> ini biasanya lebih dari satu pada umumnya template terletak pada kode <data:post.body/> nomor 2

<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>

Dan simpan template sobat dan lihat hasilnya, post view counter di blog sobat sudah muncul.

Ditulis Oleh : Robby Armansyah

Anda baru saja membaca artikel dengan judul Membuat Counter Penghitung Jumlah Tampilan Post Pada Blogspot. Di tulis oleh Robby Armansyah. Hak cipta di lindungi DMCA dan UUD
URL laman ini.

https://kampung-bodoh.blogspot.com/2014/11/membuat-counter-penghitung-jumlah_76.html

✚

9 comments

lenovo January 3, 2015 at 6:02 AM

Author

Thanks triknya,akhirnya bisa :D

stephanus wahyu July 8, 2015 at 11:58 PM

Informasi yang menarik, saya memang mencari cara membuat counter seperti ini. Mudah2an bisa. Salam mampir balik.. :)

Nicko Ardhana August 26, 2015 at 9:32 PM

diatas kode < body > atau < /body > ??

Robby Armansyah September 23, 2015 at 8:23 AM

< body > gan, it loch yg d bwah < /head >

Pangky Gustian October 2, 2015 at 12:06 PM

This comment has been removed by the author.

Syuif Ali November 26, 2015 at 9:34 AM

kok gk bisa mas bro,,
http://www.kang-bahar.tk/

mohon solusinya

Cak Yit January 12, 2016 at 5:59 AM

Cak Yit Blogger Tips & Trick
wah keren ijin praktek
#Maaf_Kalo_Nyepam :3

PLC DROID September 9, 2017 at 2:54 AM

Pertamax bang tp ada yang lebih simple kah ??

Capten Roi October 15, 2017 at 11:10 AM

minta solusinya jumlah views nya nggak bisa tampil gan mohon solusinya

Kampung Bodoh