Cara membuat counter penghitung pengunjung di setiap postingan
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 Firebase. Klik disini Firebase
2. Create New App
Masukan nama app ini nantinya akan jadi url app firebase kamu dan Create new app.
3. Ambil URL Firebase
Ambil URL Firebase contoh https://hiramekarieku.firebaseio.com
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('http://4.bp.blogspot.com/-PZMStRDcchY/USOp3xFp4yI/AAAAAAAAJOo/rm5FSsaSKh0/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('http://4.bp.blogspot.com/-_dXedKDHIws/USOp369zEPI/AAAAAAAAJOs/Cv3fTZUaBTU/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> atau dibawah <body>
<!-- Post Views Script -->
<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://hiramekarieku.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>
5. Tambahkan Kode berikut di bawah <head> atau diatas </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
<!-- Post Views Counter -->
<div id="views-container">
<span class="views-icon"><div class="views-text">
Views:</div>
<div class="mbtloading viewscount" id="postviews">
<b></b></div></span></div>
Dan simpan template sobat dan lihat hasilnya, post view counter di blog sobat sudah muncul.
Tags:
Facebook Comment
Share and like
No comments :
Post a Comment