Sobat blogger semua sekarang anda akan dapat menampilkan hitungan dinamis untuk tampilan halaman individu (postviews). Kita sekarang dapat dengan mudah membuat posting ini pandangan kontra tanpa khawatir tentang server atau server code. Dengan layanan gratis dari
Firebase kini Anda dapat membuat plugin dinamis dan data-drive untuk blogger
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/AVvXsEjluzqVv2I941MBqyfSGiwvSUtvHpb8I_xFL69HDuUFwdWRz0gjeWnu59XQHuAuqw8XdQsnHgTmC4Gyo91xY-5SgqQkK1B3m3UnH45fKdwfwzd8EdHlHtcL7z_hab3WNpZRyQK42Lq0LZez/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/AVvXsEg7OtHSP-ELJZ6hngtp1HLs5379N-Icbqy0m2RH1tN7Bi6WnO4RJ3ZC5HP7tK4THRqaKgOYspkXqGDQY8H68bq2y14yeDWze94MpG_6YPn6jYlDLQpJmQWa3Zeq7ihnHDy_yrGFa82BT6Vu/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
