Cara Membuat Counter View Firebase Di Blog

Cara Membuat Counter View Firebase Di Blog
Pada post kali ini saya akan membahas bagaimana membuat Counter View di blog, maksud dari Counter View ini adalah dapat melihat jumlah pengunjung yang sudah mengunjungi Artikel di blog kalian. Jumlah tersebut bisa dibilang Real Time atau asli sekali.

Bagi yang ingin mencobanya, silahkan ikuti tutorial berikut:

1. Pertama, buat dulu akun firebase disini firebase

2. Akun Firebase bisa digunakan dengan Gmail, jika akun gmail sudah ada otomatis akan menggunakan Akun Gmail saja dan langsung dapat membuat Projek Firebase.

3. Kamu klik Tambahkan Projek


4. Silahkan untuk menggatur Nama Projek dan Negara/Wilayah, jika sudah klik Buat Projek


5. Setelah itu akan masuk kebagian Dashboard seperti ini

6. Silahkan kamu klik Develop > lalu Database


7.  Disitu terdapat Cloud Firstore Beta dan Realtime Firebase kamu pilih yang Realtime Firebase untuk membuat Count View diblog

8. Pada bagian Tab Diatas terdapat Data, Aturan, Cadangan, Penggunaan. Kamu pilih pada bagian Aturan untuk menseting agar Firebase dapat terbaca di blogger.

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

kamu ubah menjadi true, hasilnya akan seperti ini

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

Kemduian kamu Publikasikan agar dapat merubah settingan tersebut.

Sekarang yaitu menerapkannya ke Blogger, silahkan simak tutorial berikut:

1. Buka akun Blogger anda > Pilih Tema / Template > Pilih Edit HTML

2. Cari kode ]]></b:skin>, lalu copy kode dibawah ini dan letakkan (paste) diatas kode ]]></b:skin>

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

3. Cari kode </body>, copy kode dibawah ini lalu letakkan (paste) diatas kode </body>

<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>


Keterangan:
Ganti URL : kang-iyan.firebaseio.com dengan URL Firebase kamu, jika belum memiliki URL Firebase maka silahkan Login menggunakan akun Google terlebih dahulu di https://firebase.google.com/
4. Jika sudah membuat proyek database di Firebase, maka selanjutnya tinggal menempatkan kode Post Views Counter dibawah ini kedalam template kalian. Penempatan kode Post Views Counter bebas terserah kalian 

<span class="post-view" expr:data-id="data:post.id"><i class="fa fa-eye"> Dilihat <span class="view-load" id="postviews">0</span> kali</i></span>

Keterangan:
Post Views Counter ini memiliki proses asinkron pada blog, yang artinya : post views counter akan terlihat jika proses loading pada halaman blog sudah selesai termuat, sedangkan apabila proses loading halaman blog belum selesai termuat maka post views counter masih menampilkan nominal 0 views
Dilihat 0 kali

0 Response to "Cara Membuat Counter View Firebase Di Blog"

Post a Comment

Centang kotak "NOTIFT ME" agar mendapatkan notifikasi melalui email ketika ada yang membalas komentar kamu.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Δ