POST VIEWS DI BLOG
Usep Suryana
23 Sep 2013
0
comments
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
Artikel Terkait
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: POST VIEWS DI BLOG
Usep Suryana | Twitter | Facebook Page
Published :23 Sep 2013 Jam 14.11
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.
Judul: POST VIEWS DI BLOGUsep Suryana | Twitter | Facebook Page
Published :23 Sep 2013 Jam 14.11
Silakan jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi tulisan ini. Terima kasih sudah singgah serta membacanya, Semoga tulisan ini bermanfaat bagi sobat Blogger Copast semuanya amin.
Tidak ada komentar:
Komentar anda dimoderasi, Kata-kata yang kurang baik tidak akan saya tampilkan atau saya hapus Terima kasih