Cara Membuat Post View Counter Atau Realtime Di Blogger Menggunakan Firebase

Cara Tampilkan Jumlah Pembaca Di Setiap Artikel Blogger

Fighazmc.com - Hai teman-teman! kali ini saya akan berbagi tips dan trik tentang blogger Membuat Post View Counter Atau Realtime Di Blogger Menggunakan Firebase.

Dalam artikel ini, saya akan membagikan Cara Membuat Post View Counter Atau Realtime Di Blogger Menggunakan Firebase.

Panduan ini tidak membutuhkan pengetahuan yang mendalam tentang HTML, CSS, atau JS karena saya telah menyediakan kode yang siap digunakan.

Anda hanya perlu mengikuti panduan ini dan menyisipkannya dengan benar di dalam template Anda.

Apa Itu Post View Counter di Blogger

Post View Counter adalah widget atau alat yang fungsinya untuk melacak dan menampilkan jumlah tampilan atau pembaca yang telah mengunjungi sebuah artikel atau postingan di blog.

Dengan menggunakan Post View Counter, seorang blogger dapat memantau dan mengetahui berapa kali artikel mereka dilihat oleh pembaca.

Widget ini akan menampilkan angka atau hitungan yang merepresentasikan jumlah tampilan artikel tersebut.

Post View Counter sangat berguna dalam melacak kinerja artikel, memahami minat pembaca, dan memantau pertumbuhan blog.

Dengan informasi tentang jumlah tampilan artikel, seorang blogger dapat mengevaluasi kinerja artikel berdasarkan jumlah pembaca yang telah mengunjungi, serta memperoleh wawasan tentang topik yang diminati dan gaya penulisan yang efektif.

Pada Blogger, untuk menggunakan Post View Counter, biasanya dibutuhkan penggunaan widget HTML/JavaScript.

Blogger akan memberikan kode widget yang harus disalin dan ditempatkan di tata letak atau template blog, namun kita akan memasangkannya di Mode "Edit HTML" Setelah itu, widget akan mulai melacak jumlah tampilan artikel secara otomatis dan menampilkan hitungan yang diperoleh.

Post View Counter dapat menjadi alat yang berguna bagi seorang blogger untuk mengukur keberhasilan konten mereka, memahami audiens mereka, dan meningkatkan kualitas blog.

Pentingnya Mengetahui Jumlah Pembaca di Setiap Artikel Blog

Dalam menjalankan blog, penting bagi seorang blogger untuk memiliki pemahaman yang jelas tentang jumlah pembaca di setiap artikel yang dipublikasikan.

Mengetahui jumlah pembaca pada setiap artikel memiliki banyak manfaat yang dapat membantu meningkatkan kualitas dan keberhasilan konten yang dibagikan.

Berikut ini adalah beberapa alasan mengapa penting untuk mengetahui jumlah pembaca di setiap artikel blog:

1. Evaluasi dan Pemantauan Kinerja Artikel

Dengan mengetahui jumlah pembaca di setiap artikel, seorang blogger dapat melakukan evaluasi dan pemantauan terhadap kinerja artikel yang telah dipublikasikan.

Jika sebuah artikel memiliki jumlah pembaca yang tinggi, ini menunjukkan bahwa artikel tersebut menarik minat pembaca dan berhasil menjangkau audiens yang luas.

Sebaliknya, jika jumlah pembaca rendah, ini bisa menjadi pertanda bahwa artikel tersebut perlu diperbaiki atau ditinjau kembali.

Informasi ini membantu blogger untuk mengevaluasi gaya penulisan, topik yang diminati, atau teknik promosi yang efektif untuk meningkatkan kinerja artikel di masa depan.

2. Memahami Minat dan Preferensi Pembaca

Dengan mengetahui jumlah pembaca di setiap artikel, seorang blogger dapat memahami minat dan preferensi pembaca mereka.

Data ini memberikan wawasan berharga tentang topik yang paling diminati, jenis konten yang paling disukai, dan gaya penulisan yang efektif.

Dengan memahami minat pembaca, seorang blogger dapat menyusun strategi konten yang lebih cerdas, menghasilkan artikel yang relevan dan menarik, serta menjaga audiens tetap terlibat.

3. Pengembangan Ide Konten

Mengetahui jumlah pembaca di setiap artikel dapat menjadi sumber inspirasi dan pengembangan ide konten.

Data ini membantu seorang blogger untuk mengidentifikasi tren atau topik yang sedang populer di kalangan pembaca mereka.

Dengan informasi ini, blogger dapat menghasilkan konten baru yang menarik dan relevan, serta mengisi kekosongan informasi yang mungkin belum tercakup dalam artikel sebelumnya.

Jadi, pemantauan jumlah pembaca di setiap artikel dapat menjadi panduan untuk pengembangan ide konten yang kreatif dan berorientasi pada kebutuhan audiens.

4. Evaluasi Efektivitas Promosi

Mengetahui jumlah pembaca di setiap artikel juga membantu dalam mengevaluasi efektivitas promosi yang dilakukan oleh seorang blogger.

Dalam dunia digital yang semakin kompetitif, promosi konten menjadi kunci penting untuk meningkatkan visibilitas artikel di antara pembaca potensial.

Dengan memonitor jumlah pembaca di setiap artikel dan membandingkannya dengan upaya promosi yang telah dilakukan, seorang blogger dapat mengevaluasi apakah strategi promosi telah berhasil atau perlu disesuaikan.

Hal ini memungkinkan blogger untuk mengoptimalkan upaya promosi mereka, mengidentifikasi platform yang paling efektif, dan mencapai audiens yang lebih luas.

5. Motivasi dan Pengembangan Diri

Mengetahui bahwa artikel yang ditulis oleh seorang blogger telah dibaca oleh sejumlah orang dapat menjadi sumber motivasi dan pengembangan diri.

Jika sebuah artikel memiliki jumlah pembaca yang tinggi, hal ini menunjukkan bahwa tulisan dan kontribusi seorang blogger bernilai bagi orang lain.

Hal ini dapat meningkatkan kepercayaan diri dan semangat dalam menulis lebih banyak artikel yang bermanfaat dan berkualitas.

Selain itu, dengan melihat tanggapan dan komentar pembaca, seorang blogger dapat belajar dari umpan balik mereka dan terus mengembangkan kemampuan penulisan.

Apa Itu Firebase?

Firebase adalah sebuah platform pengembangan aplikasi yang disediakan oleh Google.

Ini adalah kumpulan alat dan layanan yang dirancang untuk membantu pengembang membangun aplikasi web dan mobile yang berkualitas tinggi dengan cepat.

Firebase menyediakan berbagai fitur yang mencakup penyimpanan data, autentikasi pengguna, hosting, analitik, pesan, dan masih banyak lagi.

Salah satu komponen utama Firebase adalah Firebase Realtime Database, yang merupakan database cloud yang dapat disinkronkan secara real-time antara pengguna dan server.

Ini memungkinkan pengembang untuk dengan mudah menyimpan dan menyinkronkan data secara real-time antara berbagai klien, seperti aplikasi web, mobile, atau perangkat IoT.

Selain Firebase Realtime Database, Firebase juga memiliki fitur seperti Firebase Authentication, yang menyediakan sistem otentikasi pengguna yang mudah digunakan dengan dukungan untuk otentikasi melalui email, Google, Facebook, Twitter, dan platform lainnya.

Firebase juga menyediakan hosting untuk aplikasi web, layanan analitik untuk melacak penggunaan aplikasi, dan alat pengujian dan debug yang kuat.

Firebase menyediakan API yang mudah digunakan dan SDK (Software Development Kit) untuk berbagai platform dan bahasa pemrograman, termasuk JavaScript, Android, iOS, Unity, dan banyak lagi.

Dengan Firebase, pengembang dapat mempercepat proses pengembangan aplikasi dan fokus pada pengalaman pengguna tanpa perlu menghabiskan waktu berlebihan untuk membangun infrastruktur backend dari awal.

Cara Menampilkan Jumlah Pembaca Atau Post View Counter Di Blogger Menggunkan Firebase

Barikut langkah-langakah menampilkan jumlah pembaca atau post view counter blogger.

1. Membuat Proyek Baru Di Firebase Console

Masuk ke Firebase Console.
Pilih opsi "Create a Project" dan masukkan nama Proyek yang kamu inginkan, lalu klik "Continue" untuk melanjutkan.
Pastikan kamu menonaktifkan opsi Google Analytics, kemudian klik "Create Project" untuk menyelesaikan proses pembuatan proyek.

Selesai! Proyek dalam Firebase telah berhasil dibuat. Selanjutnya, kita akan melakukan pengaturan Realtime Database.

2. Instal Basis Realtime Database Di Firebase

Masuk ke Firebase Console dan pilih Proyek yang baru saja dibuat.
Di menu sebelah kiri, buka Realtime Database.
Pilih Buat Database, lalu klik Lanjutkan.
Lanjutkan dengan memilih Mode Terkunci dan tekan Aktifkan.

Sekarang, database Realtime telah berhasil dibuat. Salin alamat URL yang sudah ditandai pada gambar.

3. Membuat Data Analisis Realtime Database Di Firebase Console

Selanjutnya, pindah ke tab ATURAN (RULES) dan kalian ganti seluruh kode lama dengan potongan kode berikut ini:

{
  "rules": {
    ".read": true,
    "BlogID_0000000000000000000": {
      ".read": true,
      "$post_id": {
        ".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
        ".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
      }
    }
  }
}

Ganti "0000000000000000000" dengan Id Blog Kalian

4. Pasang CSS Realtime Di Blog

Salin CSS dinawah Ini

<!--[ Realtime Post View Counter by FIGHAZMC Blog]-->
.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}

Lalu Masuk Ke Dasbor Blogger

Pilih "Tema"
Lalu Pilih "Edit HTML"
Pastekan Kode Diatas di sebelum Tag "]]></b:skin>"

5. Pasang Kode Pemanggil Realtime Di Dalam Blog

Salin Kode Pemanggil dibawah ini

<span class='fgz_view entry-views hidden' data-add='true' expr:data-id='data:post.id'/>

Lalu tempatkan di bagian yang ingin anda tampilkan realtime-nya. Kalau ada <b:if cond='data:post.dateHeader'><p class='date-header'>, atau teman-teman bisa juga nyari kode <b:includable id='postInfo'> atau yang hampir mirip, terus cari kode penutupnya yang </b:include>, terus tempelkan kode berikut ini tepat sebelum kode penutup </b:include> tadi.

SelanjutNya, Kalian Salin Kode Dibawah Ini

<script>
  /*<![CDATA[*/
  /*! Realtime Post View Counter by FGZ Blog */
  const viewSeting = {
      blogID: '0000000000000000000',
      databaseUrl: 'databaseUrl',
      abbreviation: true,
      lazyload: true
  }
  function loadJs(e, b, c, d) {
      let a = document.createElement("script");
      b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
  }
  function abvr(a) {
      var b = Math.sign(Number(a));
      return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
  }
  function loadPostVw() {
      for (var c = document.querySelectorAll(".fgz_view"), e = firebase.database(), a = 0; a < c.length; a++) {
          var d = c[a],
              b = d.getAttribute("data-id");
          (b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
              return function(c) {
                  0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
              }
          }(d, b))
      }
  }
  function postVw() {
      loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
          loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
              var a = {};
              a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
          })
      })
  }
  if (!0 === viewSeting.lazyload) {
      var a = [],
          b = [];
      let c = () => {
          0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
      };
      window.addEventListener("scroll", a => {
          (0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
      }, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
          c()
      }), localStorage.getItem("LZ_VIEW") && postVw()
  } else postVw()
  /*]]>*/
</script>

Lalu pastekan tepat ditas tag "</body>"

Penting:
Ganti
1. blogID: '0000000000000000000' dengan Idblogkalian
2. databaseUrl: 'databaseUrl' Ganti dengan URL Data Realtime yang tadi sudah kalian buat

Setelah semuanya selesai pilih simpan untuk melihat hasilnya.

Kesimpulan

Sekian untuk artikel Cara Membuat Post View Counter Blogger. Post View Counter adalah widget atau alat yang fungsinya untuk melacak dan menampilkan jumlah tampilan atau pembaca yang telah mengunjungi sebuah artikel atau postingan di blog.

Selamat Mencoba!

Fighaz Mc Halo! Saya adalah pemilik blog fighazmc.com, sebuah ruang pribadi saya untuk berbagi tips, informasi, dan pengetahuan seputar dunia internet dan teknologi. Mari jelajahi dunia digital bersama!

FighazMc