Cara Membuat Jumlah Pengunjung Web di Blogger dengan Firebase
Jumlah Pengunjung Web Blogger Firebase Dengan Firebase sekarang Anda dapat menampilkan jumlah pengunjung di blog Anda untuk setiap artikel blogger. Banyak sekali tutorial Cara Membuat Post View Counter yang Menarik di Blogger Dengan Firebase di internet, namun kebanyakan tidak update, atau hanya berlaku untuk theme yang belum diedit.
Jika Anda menggunakan tema blogspot komersial atau editan selain tema blogspot standar asli, ini adalah posting yang tepat untuk Anda. Tapi, mengapa perlu menambahkan penghitung tampilan posting blog Anda jika Anda bisa memeriksanya dan sudah memilikinya di dashboard blogger? Blogging itu menyenangkan, dan kebanyakan blogger ingin membuat blog mereka unik dan menarik.
Penghitung tampilan postingan blog biasa disebut dengan Post View Counter sebagai kata kunci untuk mencari dan ingin membuat post view counter di Google dengan menggunakan Firebase. Firebase adalah layanan yang disediakan oleh Google dan banyak digunakan untuk memudahkan pengembang aplikasi dalam mengembangkan struktur aplikasi.
Dengan Firebase kita bisa fokus mengembangkan aplikasi tanpa harus berusaha keras. Seperti dengan membuat Aplikasi Jadwal Aktivitas Menggunakan Firebase yang sudah di bahas pada postingan sebelumnya. Untuk Cara Membuat Jumlah Pengunjung Web di Blogger dengan Firebase bisa dilihat tutorialnya dibawah ini.
Baca juga : Cara Membuat Postingan Blog Agar Tidak Bisa di Copy Paste
Cara Membuat Post View Counter di Blog dengan Firebase
Tujuan dari cara menampilkan jumlah pengunjung di blog untuk setiap artikel blogger dengan Firebase adalah untuk memudahkan pembaca melihat postingan mana yang sudah banyak dilihat oleh orang lain. Bagi kami juga dapat digunakan sebagai administrator untuk melacak bagaimana tampilan posting di bagian depan blog dan untuk mengetahui posting mana yang menarik bagi pembaca.
Blogger sekarang dapat dengan mudah menambahkan penghitung tampilan posting karena Firebase menyediakan layanan GRATIS untuk semua orang! Kita sekarang dapat dengan mudah membuat penghitung tampilan posting ini tanpa mengkhawatirkan server atau kode server. Semua blog Blogger sekarang dapat menampilkan jumlah dinamis untuk tampilan halaman individual. Ikuti langkah-langkah di bawah ini untuk Cara Membuat Post View Counter di Blog dengan Firebase.
1. Pertama Membuat Akun Firebase
Sebagai penyimpanan database disini kami menggunakan firebase yang telah disediakan oleh Google. Sebelum Anda menambahkan widget post view counter ini, Pertama Anda harus membuat akun di Firebase. Kemudian klik tombol Mulai > Create a project untuk membuat Proyek Firebase Anda.
Selanjutnya pada bagian Let's start with a name for your project artinya Mari kita mulai dengan nama untuk proyek Anda. Sekarang buat nama project Anda. Kemudian centang bagian "I accept the Firebase terms" dan klik tombol "Continue".
Selanjutnya pada bagian Google Analytics for your Firebase project. Keterangan Google Analytics adalah solusi analitik gratis dan tidak terbatas yang memungkinkan penargetan, pelaporan, dan lainnya di Firebase Crashlytics, Cloud Messaging, In-App Messaging, Remote Config, Pengujian A/B, Predictions, dan Cloud Functions. Pada bagian ini Anda klik saja tombol "Continue".
Selanjutnya pada bagian Configure Google Analytics. Di sini Anda harus sudah menambahkan Google Analytics di blog Anda sebelumnya. Agar muncul di tab menu "Select an account". Jika Anda belum menambahkan Google Analytics di blog Anda, Anda dapat melihat posting kami sebelumnya tentang Cara Memasang Google Analytics di Blogspot Update 2021.
Setelah itu klik tab menu “Select an account” dan sinkronkan dengan akun Google Analytics Anda sesuai dengan email blog yang digunakan. Kemudian klik tombol "Create project". Tunggu proses Creating your project Anda. Sampai akun Google Analytics Anda ditemukan dengan deskripsi Your new project is ready. Kemudian klik tombol "Continue".
Sejauh ini, kita telah berhasil membuat akun dan membuat proyek. Sekarang saatnya kita membuat Realtime Database.
2. Membuat Realtime Database
Setelah selesai membuat project baru, kita akan diarahkan ke halaman dashboard Firebase. Kemudian pada bagian menu pilih Build > Realtime Database > Create Database
Selanjutnya akan muncul tampilan form Set up database.
- Database options
- Security rules
Baca juga : Firebase Realtime Database For Web dan bagaimana Cara Hosting di Firebase Dari Visual Studio Code. Anda dapat membacanya pada postingan di blog ini tentang firebase realtime database.
1. Database options
Pengaturan lokasi Anda adalah tempat penyimpanan data Realtime Database Anda. Sesuaikan Realtime Database location Anda. Pilih United States (us-central1) dan klik tombol "Next".
2. Security rules
Setelah Anda menentukan struktur data Anda, Anda harus menulis aturan untuk mengamankan data Anda.
- Start in locked mode Data Anda bersifat pribadi secara default. Akses baca/tulis klien hanya akan diberikan sebagaimana ditentukan oleh aturan keamanan Anda.
- Start in test mode Data Anda terbuka secara default untuk mengaktifkan penyiapan cepat. Namun, Anda harus memperbarui aturan keamanan Anda dalam waktu 30 hari untuk mengaktifkan akses baca/tulis klien jangka panjang.
Terdapat 2 pilihan untuk aturan keamanan. Anda bisa pilih Start in loked mode dan klik tombol "Enable".
Sampai tahap ini anda sudah berhasil membuat firebase, simpan nama firebase ID anda. ID firebase biasanya terlihat seperti ini https://contohnama-id.firebaseio.com. yang diakhiri dengan firebaseio.com seperti contoh gambar diatas.
Selanjutnya beralih ke Rules. Pilih Realtime Database > Rules > Edit rules
Dari kode di atas, ubah kode dari false menjadi true. Kodenya akan seperti ini:
Setelah itu gulir ke bawah untuk membuat aplikasi Anda. Pilih platform untuk memulai Web </>.
Sekarang Tambahkan Firebase ke aplikasi web Anda. Kemudian isi App nickname dan centang pada keterangan "Also set up Firebase Hosting for this app". Setelah itu, klik tombol Register app > Next > Continue to console.
3. Tambahkan Post View Counter di Postingan Blogger
Tambahkan Post View Counter di Postingan Blogger untuk mengonfigurasi blog atau situs web Anda. Setelah semua ini terakhir salin kode sumber dari tautan dibawah, tempel ke template HTML blogger Anda di atas </body>.
Setelah itu kembali ke template Edit HTML Blogger. Pastekan kode yang di salin tadi tepat di bawah
// Your web app's Firebase configuration
Sekarang kita ke bagian kode <data.post.body/> untuk menemukan area penulis. Kemudian tempel kode javascript berikut ini tepat di bawah kode <span class='post-author'> atau sama saja dengan kode <div class='post-info'> pada template Edit HTML Anda. Tempel Kode HTML Plugin di bawah ini.
Baca juga : Cara Share Postingan Blog ke Media Sosial Secara Otomatis pada tahun 2021
Sekarang Anda dapat melihat hasilnya. Buka posting blog Anda dan segarkan halaman. Ini adalah contoh loket pengunjung asli dari blog Anda.
Selain itu Anda bisa membaca postingan kami sebelumnya tentang Cara membuat kalkulator dengan HTML, CSS, JavaScript di Notepad dan Cara Membuat Slideshow Otomatis dengan HTML dan CSS.
Kesimpulan
Dengan membuat Post View Counter di Blog akan menarik dan mempercantik tampilan blog seperti halnya Facebook dan Instagram yang memiliki fitur Post View Counter. Selain itu, pembuatan Post View Counter ini dapat memudahkan pembaca untuk melihat postingan mana yang sudah banyak dilihat oleh orang lain. Ini juga dapat digunakan sebagai administrator untuk melacak bagaimana posting terlihat di bagian depan blog dan untuk mengetahui posting mana yang menarik bagi pembaca.
Script di atas bisa bekerja di template blogger default dan beberapa template lainnya kecuali template blogger dari JetTheme. Untuk Cara Membuat View Counter di JetTheme Blogger Template, Anda bisa membaca postingan kami yang sudah kami publikasikan di blog ini.
Demikian posting kali tentang Cara Menampilkan Jumlah Pembaca Blog atau Cara Membuat Post View Counter di Blog dengan Firebase. Semoga artikel ini bermanfaat dan dapat membantu Anda. Yuk share artikel ini untuk membantu teman-teman yang lain. Terima kasih!
Gan, saya sudah mencoba terapkan , tapi tidak muncul ya , knapa ya gan
Iya tinggal disesuaikan aja gan tergantung template yang digunain beda-beda soalnya. Jangan lupa di konekan ke firebase