Langsung saja tahapan awal pembuatan
Buat Akun Firebase Anda
Dalam rangka untuk mendapatkan akses ke database gratis dan dapat menyimpan cadangan postviews Penghitung data Anda, Anda harus mendaftar untuk account gratis di Firebase.
Klik di sini untuk mendaftar sekarang!
Buat Database Firebase
Di dalam kotak ini masukan nama website Anda. Sebagai contoh saya masukkan blogger-copast dan ini dihasilkan URL firebase berikut: http://blogger-copast.firebaseio.com/
Instalasi Plugin Postviews
- Pergi Untuk Blogger> Template
- Backup template Anda
- Klik Edit HTML
- Centang kotak "Expand widget Template"
- Cari]]> </ b: skin>
- Tepat di atas ]]> </ b: skin> paste kode CSS berikut:
/*-------- Post Views ----------*/
#views-container {
width: 85px;
float: right;
}
.mbtloading {
background: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnkRpLoRucb2InPwqGxhBGZNjrVk-mwlgGR6lwEaSUMtRSP4GS-mGJ4hQsoL0vq3vGp8GKAFmsJtSGBviA-yl0dzD3UJgSOU3IzYOUVb-SAL41t-CdLMjX6ZQRrdhbBhP-opreMYOaaJ1P/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/AVvXsEgQAV2hfcaiGQrjgknKnyY50UxZdW6Z_iRsGtg3lPwDrxsWdDizLba4IpgaIbOMtH7ZuNxUQPmDT80L5jhJspi6K6nGggKxDnmkDezo0fAFQM1ZmdOCSeEIXHL_xRL9uEshKsXOWWVuLYG5/s1600/postviews.png') no-repeat left;
border: 0px;
display: block;
width: 16px;
height: 16px;
float: left;
padding: 0px 2px;
}
Kustomisasi:
Untuk mengubah warna teks dari hitungan angka, mengedit # EE5D06
Untuk mengubah alignment Plugin, mengubah kanan ke kiri.
Berikutnya cari </ body> dan paste kode JavaScript dibawah ini tepat di atas </body>
<!-- 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://blogger-copasts.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 garis coklat disorot dengan URL firebase Anda. Pastikan Anda menggantinya dengan benar
Kemudian cari kode <data:post.body/>
Catatan : Jika anda menemukan dua kode yang sama, pilih kode yang pertama.
lalu letakan scipt dibawah ini di atas <data:post.body/>
<-! Pos Views Counter oleh MBT ->
<div id='views-container'> <span class='views-icon'/> <div class='views-text'> Views: </ div> <div class = id 'mbtloading viewscount' = 'postviews' /> </ div>
Anda dapat mengganti kata teks yang berwarna hijau dengan kata yang anda suka
Sekarang tinggal langkah terakhir, paste link jquery berikut tepat di bawah <head>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js' type='text/javascript'> </ script>
Liat tampilan di bawah ini :
Sumber
Tidak ada komentar:
Posting Komentar