Cara Membuat Views Count Pada Template Viomagz Di Blogger

Cara Membuat Views Count Pada Template Viomagz Di Blogger


Pelajar Design - Pada kesempatan ini saya akan membagikan Cara Membuat Views Count Pada Template Viomagz Di Blogger. Jadi disini kita akan menggunakan script dari Firebase yang merupakan salah satu produk dari Google dan nantinya anda bisa login untuk mendapatkan script ini dengan menggunakan akun Google kalian. Dengan Views Count ini kita bisa tau jumlah pengunjung dari artikel yang telah kita buat.

Views Count ada sebuah alat yang digunakan pada Website Atau Blog yang digunakan untuk menghitung jumlah pengunjung yang datang ke Website Atau Blog kalian. Kalian membutuhkan akun Google untuk nantinya login agar mendapatkan ID Firebase yang nantinya akan dipasangkan di script yang Pelajardzgn.my.id berikan.

Jadi, jika ada pengunjung yang datang ke Website Atau Blog jumlah Views Count yang dipasang akan bertambah. Sebenarnya kalian bisa melihat jumlah pengunjung yang datang ke Website Atau Blog kalian di Dashboard Blogger.

Namun pengunjung tidak dapat mengetahui jumlah pengunjung yang membaca artikel tersebut. Jika kalian pengguna CMS WordPress sudah disediakan sebuah Plugin, jadi kalian tinggal menginstal Plugin tersebut.

Berbeda dengan CMS Blogger, kita harus memanfaatkan Firebase Console Google untuk menyimpan semua data tersebut dan ditambah beberapa kode.

Mungkin ada beberapa Blogger Pemula (Seperti saya) yang mencari tutorial Cara Membuat Views Count Pada Blogger. Nah, saya mencari beberapa artikel tentang Cara Membuat Views Count Pada Blogger, dan saya menemukan artikel tersebut.

Tanpa membuang waktu saya praktekan tutorial tersebut, namun ada beberapa kesalahan yang terdapat pada tutorial tersebut. Namun tenang saja, saya sudah memperbaiki tutorial tersebut pada artikel ini.

Cara Membuat Views Count Pada Template Viomagz Di Blogger

1. Pertama-tama silahkan login ke Firebase Google.
2. Kemudian pilh Tambahkan Proyek atau Buat Proyek.

Pembuatan Projek Baru Di Firebase

3. Isi Nama Proyek sesuai keinginan anda, dan setel Negara lalu centang persetujuan dan klik Buat Proyek.

Langkah Langkah Pembuatan Projek Baru

4. Tunggu proses hingga selesai, jika sudah silahkan klik Lanjutkan.

Loading Pembuatan Projek

5. Dihalaman ini kita pilih Develop > Database pada menu sebelah kiri. Kemudian scroll kebagian bawah dan pilih Realtime Database dan Buat Database.

Realtime Database

6. Pilih mode Mulai Dalam Pengujian lalu klik Aktifkan.

Setingan Realtime Database

7. Kemudian kalian catat atau ingat link ID-Firebase kalian.

ID Firebase

8. Buka akun Blogger yang ingin dipasang Views Count.
9. Lalu pilih menut TEMA > Edit HTML.
10. Cari kode </body> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

<script src='https://cdn.firebase.com/js/client/2.3.2/firebase.js' type='text/javascript'></script>
<script type='text/javascript'>//<![CDATA[
// View counter
$.each($(".post-view[data-id]"),function(c,f){var b=$(f).parent().find("#postviews").addClass("view-load"),d=new Firebase("https://ID-FIREBASE.firebaseio.com/pages/id/"+$(f).attr("data-id"));d.once("value",function(e){var h=e.val(),g=!1;null==h&&(h={},h.value=0,h.url=window.location.href,h.id=$(f).attr("data-id"),g=!0),b.removeClass("view-load").text(h.value),h.value++,"/"!=window.location.pathname&&(g?d.set(h):d.child("value").set(h.value))})});
//]]></script>

Silahkan kalian ganti tulisan yang diberi background merah dengan link ID Firebase kalian.

11. Kemudian untuk menampilkan Views Count, kalian tinggal paste kode dibawah ini pada tempat yang diinginkan.

Nah, pada tutorial kali ini saya akan menempatkannya disebelah tanggal pembuatan artikel. Jika ingin sama silahkan cari kode post-info info-3 dan pastekan kode diatas tepat  dibawahnya.

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

12. Selesai.

Jika Views Count Tetap Menunjukan Angka 0

1. Masih dibagian Firebase, kalian pilih Aturan.

Setingan Firebase

2. Lalu pilih bagian Simulasi.

Setingan Firebase

3. Lalu kalian rubah Jenis Simulasi yang semulanya Baca menjadi Update, lalu Jalankan.

Setingan Firebase

4. Silahkan dicek kembali apakah fitur Views Count sudah berfung apa belum.

Bagaimana tutorial tentang Cara Membuat Views Count Pada Template Viomagz Di Blogger. Silahkan download dibawah dan jangan lupa berikan komentar tutorial apalagi yang kalian inginkan untuk saya bahas.

You may like these posts