Cara Terbaru Membuat Post View Counter Menarik di Blogger

Post View Counter adalah suatu widget yang berfungsi untuk menghitung dan menampilkan jumlah viewers pada masing-masing postingan di website atau blog Anda.

Tips ini hanya bekerja untuk Anda yang menggunakan platform Blogger. Widget Post View Counter sangat berguna untuk blog Anda, sehingga Anda nantinya akan mengetahui berapa banyak pengunjung blog yang telah melihat atau membaca setiap artikel yang ada di blog Anda.

Bagi Anda yang akan berminat untuk menerapkan widget ini di blog atau website Anda, berikut ini merupakan langkah-langkah dalam pembuatan widget Post View Counter di blog.

Cara Membuat Post View Counter Menarik di Blogger

1. Buka https://firebase.google.com, pastikan Anda login dengan akun Google Anda. setelah anda login klik Mulai.

2. klik Buat project.

3. Buat NAMA PROJECT, jangan lupa untuk mencentak kotak kecil diatas Continue. Selanjtnya klik Continue.

4. Hidupkan saklar Enable Google Analytics for this project, dilanjutkan dengan mengklik Continue.

5. Pilih akun Google Analytics Anda, selanjutnya klik Create project.

6. Lalu, tunggu sampai creating project selesai selanjutnya klik Continue.

7. Setelah berada pada Dashboard Firebase klik Build.

8. Setelah menu Build terbuka klik Realtime Database.

9. Klik Create Database.

10. Pada halaman set up database. pada opsi pertama klik Next.

11. Pada bidang Security rules pilih Start in test mode. Selanjutnya klik Enable.

12. Selanjutnya copy atau simpan ID firebase Anda. ID firebase biasanya seperti ini https://tamboenman.firebaseio.com (seperti contoh gambar dibawah).

13. Kemudian klik Rules, selanjutnya klik Edit rules, hapus semua kode yang ada didalam kotak dengan kode ini

{
  "rules": {
    ".read": "true",
    ".write": "true",
  }
}

Selanjutnya klik Publish. Sampai pada tahap ini Anda sudah berhasil membuat database nya di firebase.

14. Selanjutnya kita tinggalkan firebase, kita menuju dashboard blogger untuk melakukan konfigurasi firebase dengan blog atau website Anda. Masuk ke account Blogger Anda. Kemudian pilih TEMA → Edit HTML. Letakan kode javascript berikut ini tepat di atas kode </head> atau </body>. Untuk mempermudah pencarian silahkan gunakan Ctrl+F.

Setiap template mempunyai struktur kode yang berbeda - beda, apabila kodenya diletakkan di atas kode </head> post view counternya tidak tampil, pindahkan kode dibawah diatas 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://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>

Silahkan ubah https://tamboenxxxxxxxxx.firebaseio.com dengan menggunakan ID Firebase Anda.

15. Kemudian paste-kan kode berikut ini di atas kode </style> atau </b:skin>.

/* 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 */

Anda bisa mengganti kode warna yang ditandai diatas sesuai selera Anda.

16. Kemudian letakkan kode dibawah ini di bawah 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>

Jika Website Anda menggunakan template viomagz, Anda bisa meletakkan kodenya dibawah kode div class='post-info, jika kode diatas ditempatkan dibawah kode div class='post-info info-1, maka post view counternya tampil di homepage.

Jika kodenya di letakkan dibawah kode div class='post-info info-3, maka post view counternya akan tampil di dalam postingan. Anda bisa menempatkan kodenya dikedua bidang tersebut maupun hanya satu saja.

17. Apabila penempatan semua kode benar maka tampilannya akan seperti contoh gambar paling atas dalam artikel ini.Kita lihat di firebase View counter sudah berhasil berjalan di blog.

Klik Demo Klik Disini

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

TAMBOENMAN

Cara Terbaru Membuat Post View Counter Menarik di Blogger

Cara Membuat Post View Counter Menarik di Blogger

Menu Halaman Statis