Cara membuat postingan view Counter otomatis di postingan Blogger
Cara membuat posti view Counter otomatis di postingan Blogger
Post view counter adalah penghitung view di blog sebuah postingan secara otomatis untuk tutorial kali ini saya akan membagikan tutorial memasang page view counter secara otomatis jadi kalian tidak perlu repot-repot memasang manual di setiap postingan
CARA MEMBUAT PAGE VIEW COUNTER OTOMATIS
1 Pertama-tama kalian buka Firebase KLIK DISINI!!!
Silakan login pakai akun Google kalian jika sudah kalian klik Create a Firebase project
2 jika sudah silakan kalian isi nama project kalian 
3 lanjut seperti gambar di bawah ini kalian aktifkan ENABLE GOOGLE ANALYTICS
4 lanjut seperti ini kalian ENABLE GEMINI in FIREBASE
5 lanjutkan sampai seperti gambar di bawah ini Tunggu hingga proses pembuatan project selesai 
6 Jika sudah silakan kembali ke dashboard Firebase klik menu pilih buid pilih realtime database seperti gambar di bawah ini
7 jika sudah silakan pilih CREATE database nya
Pilih setup yg paling atas 8 jika sudah seperti gambar di bawah langsung pilih star in test mode lalu ENABLE
9 perhatikan gambar di bawah ini lihat gambar yg saya coret2 dan itulah ID Firebase kalian , jika sudah klik rules lalu hapus semua rules dan ganti dengan kode di bawah ini
{
"rules": {
".read": "true",
".write": "true",
}
}
Kita tinggalkan dulu FIREBASE nya
10 kalian kembali ke login ke dashboard blogger untuk menghubungkan ID Firebase ke blogger kalian
11 klik menu setting pada menu dashboard blogger
12 pilih tema lalu edit tema lalu kalian cari kode</body>
Jika sudah ketemu sisipan kode di bawah di atas kode </body>
<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js' type='text/javascript'/>
<script async='async' type='text/javascript'>
//<![CDATA[
$.each($(".post-view[data-id]"), function(a, e) {
var l = $(e).parent().find("#postviews").addClass("view-load"),
i = new Firebase("https://pripediaa my.id.firebaseio.com/pages/id/" + $(e).attr("data-id"));
i.once("value", function(a) {
var n = a.val(),
t = !1;
null == n && (n = {}, n.value = 0, n.url = window.location.href, n.id = $(e).attr("data-id"), t = !0), l.removeClass("view-load").text(n.value), n.value++, "/" != window.location.pathname && (t ? i.set(n) : i.child("value").set(n.value))
})
});
//]]>
</script>
KETERANGAN: GANTI
https://pripediaa my.id.firebase.com dengan ID Firebase yg kalian buat tadi
13 cari kode </b:skin> di template kalian paste kode ini di atas kode </b:skin>
/* Stars Post View Counter By : www.pripedia.my.id */
.post-view {
font-size: 95%;
margin: 5px 5px 5px 0px;
padding: 4px 8px;
color: #000;
background: #FFFFFF;
}
.post-view>i {
padding-right: 5px;
font-size: 100%;
}
/* End Post View Counter By : www.pripediiaa.my.id */
14 Kemudian untuk menampilkan kode CSS di atas kalian paste kode di bawah ini
<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> Dilihat <span class='view-load' id='postviews'>0</span> x</span>
Tepat di bawah kode ini jika kalian memasang di bawah judul blog
<div class='post-outer'>
Jika ingin memasang di bawah postingan bisa kalian taruh di bawah kode
<Data.post.body/>
Klik simpan template kalian
15 jika berhasil di pasang maka akan tampil seperti di bawah ini di Firebase 
SELESAI
Untuk demo bisa kalian lihat di blog ini
0 Response to "Cara membuat postingan view Counter otomatis di postingan Blogger "
Posting Komentar