Script Tab View Penghitung Artikel Di Buka Pengunjung.Cara ini berbeda dengan tab view artikel pengunjung yang terdahulu,karena ini menggunakan java script dan pedaftaran gratis dari server firebaseio.com,server ini menyediakan ruang gratisnya hingga 50 GB,yang mungkin cukup untuk ukuran kita,karena hanya data view saja yang disimpan.
Demo gambar:untuk demo pisik silahkan sobat lihat di blog sebelah.
Cara membuatnya :
1.silahkan anda masuk ke blogger,template-->> edit html,dan jangan lupa centang Expant Widgetnya,Setelah itu cari kode ]]></b:skin>
dan simpan kode di bawah sebelum kode ]]></b:skin>
/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjELDANgKqaYDx3xI4tjUZmxXjApvEBFHfYarO_mCBKR7Qcx9ittkQr9U6NWHDaPgNb-pDf9YUy4L0U6McG6EkJa20T3LDlV9uQjT9ddbDO3DqUdYX8EUvTw90HWciGnc1RHPWWnCL10qrJ/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/AVvXsEjq12OoiGTYl6wxey6Sg9WE9l8udM0Q8w2I8QkcLHPXjGrMUN8ZOqjXsm7sA5LosgQFPMUVCO5MypUlpNfftB_n12XsiT5iAyCGBicG38YofJ6eU05YyGwI_3iqULBU9_zco2V-8UFr3fh9/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
2.Lalu carai lagi kode </body> dan di atasnya simpan kode script di bawah.
<!-- Post Views Script by MBT -->
<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://zigzoor.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>
3.selanjutnya simpan script di bawah di atas kode <data:post.body/>.
<!-- Post Views Counter by MBT-->
<div id='views-container'><span class='views-icon'/><div class='views-text'>Views:</div> <div class='mbtloading viewscount' id='postviews'/></div>
4.Dan langkah terakhir silahkan anda simpan kode script jqury di bawah <head>,Kalaupun ditemplate sudah ada kode tersebut,lewati langkah yang terakhir ini.
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'> </ script>
Keterangan:Tulisan yang berwarna merah https://zigzoor.firebaseio.com,silahkan sobat ganti dengan Url
aplikasi firebaseio.com anda. selesai deh dan untuk lebih jelasnya lagi kalau sobat masih penasaran silahkan langsung saja ke sumbernya . untuk melihat tutorial cara pendaftarannya silahkan kesini.
Banyak scriptnya. Ntar jd penuh!
ReplyDeletehe...he... nggak bakalan penuh sob,khan templatenya pakai tex area.
Delete