Tutorial Blogger

Cara Membuat Post View Counter Di Blog

 Yang dimaksud dengan Post View Counter adalah penghitung jumlah pengunjung setiap postingan di blog.Jadi kita akan tahu berapa banyak visitor blog yang telah melihat atau membaca setiap artikel yang ada di blog.

 Bagi sobat yang ingin dan tertarik menerapkan pada blog sobat,berikut ini langkah langkah dalam pembuatan Post View Counter di blog.

1. Kita menuju https://firebase.google.com» Klik Buat Project.

Cara Membuat Post View Counter Di Blog

Cara Membuat Post View Counter Di Blog

2. Buat nama project » Konfigurasi Google Analytics (bisa pilih Jangan Sekarang) » Lanjutkan.Tunggu sampai pembuatan project sobat selesai selanjutnya klik Lanjutkan.

Cara Membuat Post View Counter Di Blog

Cara Membuat Post View Counter Di Blog

Cara Membuat Post View Counter Di Blog

Cara Membuat Post View Counter Di Blog

Cara Membuat Post View Counter Di Blog

Cara Membuat Post View Counter Di Blog

3. Setelah berada pada dashboard Firebase klik Database.

Cara Membuat Post View Counter Di Blog

4. Scroll kebawah pilih Realtime Database klik Buat database.

Cara Membuat Post View Counter Di Blog

5. Pada Aturan keamanan untuk Realtime Databasenya pilih Mulai dalam mode pengujian selanjutnya klik Aktifkan (lihat contoh gambar dibawah).

Cara Membuat Post View Counter Di Blog

Selanjutnya kita meninggalkan Firebase dan menuju blogger.

6. Klik Tema » Edit HTML
7. Letakkan kode javascript dibawah ini diatas kode </head> atau </body>.gunakan Ctrl+F untuk mempercepat pencarian.

<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://tamboenxxxxxxxxx.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>

*. Ganti https://tamboenxxxxxxxx.firebaseio.com dengan id firebase sobat.

Cara Membuat Post View Counter Di Blog

8. Selanjutnya letakkan kode dibawah ini diatas kode </style> atau </b:skin>. Gunakan Ctrl+F untuk mempercepat pencarian.

/* Stars Post View Counter By : www.tamboenman.xyz */

 .post-view {
    font-size: 95%;
    margin: 5px 5px 5px 0px;
    padding: 4px 8px;
    color: #fff;
    background: #05a6b5;
}

.post-view>i {
    padding-right: 5px;
    font-size: 100%;
}


/* End Post View Counter By : www.tamboenman.xyz */
Cara Membuat Post View Counter Di Blog

9. Selanjutnya letakkan kode dibawah ini dibawah kode <span class='post-author'> atau <div class='post-info'>.

<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>
Cara Membuat Post View Counter Di Blog

10. Apabila penempatan semua kode benar maka tampilannya akan seperti contoh gambar di bawah.

Cara Membuat Post View Counter Di Blog

 Jika ada yang masih belum di mengerti silahan mengajukan pertanyaan pada kolom komentar.semoga postingan ini bermanfaat bagi sobat semua.Selamat mencoba.

Related Articles

7 Comments

  1. kalau baru pertama kali mengakses firebase lihat sebelah atas bagian kanan tulisan language (di sebelah kotak pencarian) selanjutnya agan ubah pilihan bahasanya ke bahasa indonesia

Back to top button

Adblock Detected

To Continue Video Access. Please open via Chrome browser