Cara Menampilkan Post View Counter di Tiap Postingan Blogger

Widget post view counter biasa ditemukan dengan mudah pada platform WordPress. Terutama bagi mereka yang menggunakan layanan hosting sendiri. Dan dengan CMS yang satu ini kita dapat melihat jumlah view cukup hanya dengan memasang plugin "post view counter".

Lalu bagaimana jika kita menggunakan platform Blogger? Apakah kita juga bisa memiliki fitur tersebut pada theme kita? Dan darimanakah data jumlah pengunjung yang melihat artikel tersebut? 

Jawaban singkat untuk pertanyaan tersebut tentu saja bisa. Karena CMS Blogger membuka kemudahaan untuk menambah kemampuannya melalui edit html. Hanya saja mungkin kemampuan kita yang terbatas dalam menyusun kode. Dan kemungkinan lainnya ada yang bisa melakukan tapi tutorialnya belum sampai di depan layar komputer kita.

Untuk itulah saya tuliskan artikel terkait post view counter yang kodenya dikutip beberapa sumber. Dan berikut ini penjelasan selengkapnya tentang cara menampilkan post view counter. Namun sebelum masuk pada bahasan ini silahkan simak bahasan pembuka apa itu post view counter dan hubunganya dengan Google Firebase.

Apa itu Script "Post View Counter"?

Script post view counter adalah sebuah kode yang digunakan untuk menampilkan jumlah tampilan dari postingan di sebuah blog. Biasanya, ini ditempatkan di sidebar atau bagian bawah postingan atau di bawah judul tergantung keinginan sang blogger. 

Dimana salah satu fungsinya yaitu untuk memberikan informasi tentang popularitas artikel tersebut kepada pembaca. Namun sayangnya, jumlah yang tercatat tidak hanya berasal dari pengunjung. 

Tapi temasuk dalam hitungan juga jika artikel diakses sendiri meskipun dengan alamat IP yang sama. Itu pun baru mulai tercatat ketika script ini ditempatkan di sana yang melibatkan Google Firebase. Jadi bukan benar-benar terhitung sejak artikel tersebut dibuat hingga dibaca oleh pengunjung sebelumnya.

Apa itu Google Firebase?

Melansir dari laman resminya; Google Firebase adalah platform pengembangan aplikasi yang membantu developer mem-build serta mengembangkan aplikasi dan game favorit pengguna yang didukung oleh Google.

Platform yang dibuat oleh Google ini berguna untuk pengembangan aplikasi mobile dan web. Karena Firebase menyediakan berbagai layanan seperti penyimpanan data realtime, otentikasi pengguna, messaging, hosting, analitik, dan masih banyak lagi. 

Selain itu, Firebase memudahkan para pengembang untuk membuat aplikasi dengan cepat dan mudah tanpa harus memikirkan infrastruktur yang kompleks. Sehingga memudahkan para pengembang untuk membuat aplikasi cross-platform.

Karena dimiliki oleh Google tidak mengherankan jika Firebase juga memiliki integrasi yang kuat dengan layanan Google lainnya seperti Google Cloud Platform, Google Analytics, dan Google Ads. Namun kali ini kita hanya akan memanfaatkan layanan tersebut untuk mengambil id yang akan digunakan pada saat menempatkan script post view counter pada theme blogger kita.

Cara Menampilkan Post View Counter Tiap Postingan Blogger

Cara menampilkan post view counter tergantung pada platform yang digunakan masing-masing. Begitu juga layanan pengambilan data yang digunakan. Adapun bagi pengguna Blogger yang ingin menggunakan data dari Firebase maka ini sesuai dengan bahasan kali ini. 

Mengapa kita menggunakan layanan dari Google Firebase? Layanan serupa mungkin bisa kita dapatkan dari selainnya. Namun pilihan tersebut condong ke Firebase karena semata-mata dimiliki oleh Google. Kita tahun kan Blogger juga dimiliki oleh siapa? 

Jika ini sudah dimaklumi, sekarang masuk bahasan inti kita pada artikel kali ini. Yaitu tentang cara menampilkan post view counter di Blogger. Berikut ini tahapan selengkapnya agar post view counter bisa dinikmati meskipun menggunakan theme blogger.

1. Kunjungi laman Google Firebase.

2. Masukan email serta password jika belum login pada salah satu layanan dari Google (Blogger, GMail, Google Drive dan lain-lain).

3. Klik "Buka console".

4. Klik "Create a project".

5. Beri nama project, misalnya: sebardi-id (silahkan sesuaikan dengan nama project masing-masing). Dibawahnya ceklis tulisan I accept the Firebase terms dan I confirm that I will use Firebase exclusively for purpose relating to my trade, business, craft, or profession. Setelah itu klik "Continue" untuk melanjutkan proses pembuatan project di Firebase.

6. Klik "Continue".

7. Pilih akun yang terhubung ke Google Analytic atau buat baru dengan memilih "Create new account" setelah itu klik "Create project".

8. Tunggu beberapa saat.

9. Klik "Continue"

10. Klik Build > Realtime Database > Create Database.

11. Untuk lokasi server database saay biarkan sesuai default yaitu disimpan di Amerika. Setelah itu klik "Next" untuk melanjutkan.

12. Klik "Start in test mode" kemudian klik "Enable"

13. Copas URL Google Firebase yang didapatkan, misalnya di notepad atau text editor lainnya.

14. Perhatikan pada bagian rules yang terlihat ada baris kode seperti nomor 12.

15. Ubah "rules" default agar tidak dibatasi waktu menjadi seperti ini kemudian klik "Publish".

16. Pastikan rules yang berlaku adalah yang terbaru dengan ditandai tulisan "rules published".

17. Login ke dashboard Blogger.

18. Klik "Tema", klik icon "▼" di sebelah tulisan SESUAIKAN kemudian klik "Edit HTML".

19. Paste kode di bawah ini dan tempatkan sebelum tag </body>.

<!-- Post Views Counter --> <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://situs-saya-rtdb.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>

20. Ganti "https://situs-saya-rtdb.firebaseio.com/" dengan URL Google Firebase sesuai milik masing-masing yang didapatkan pada saat membuat database seperti ditunjukan pada langkah nomor 13.

21. Cari tag: <div class='post-header'> dan tempatkan kode berikut di sini sebelum tag <div class='post-header-line-1'/>  

<b:if cond='data:blog.pageType == "item"'> <div class='post-view-count'> <span class='post-view' expr:data-id='data:post.id'><i class='fa fa-eye'/> <span class='view-load' id='postviews'/> Viewers <!-- post view counter --> </span> </div> </b:if>

22. Pastikan sudah memanggil fontawesome dengan meletakan link cdn fontawesome berikut ini diantara tag <head> dan </head>.

<!-- Fontawesome v5 --> <script crossorigin='anonymous' src='https://kit.fontawesome.com/6f8524da33.js'/>

23. Untuk kode CSS agar diletakan disebelah kanan dengan margin 10 pixel silahkan copas kode di bawah ini kemudian tempatkan sebelum tag  ]]></b:skin>. Jika ingin mempercantik lagi silahkan tambahkan dengan kode CSS lainnya.

/*-------- Post Views Count ----------*/ .post-view-count{ padding-right: 10px; float: right; }

24. Simpan theme.

25. Hasil bisa terlihat pada laman demo seperti screenshot di bawah ini.

Kesimpulan

Menampilkan post view counter pada tiap artikel tidak hanya bisa dilakukan pada theme WordPress. Tidak terkecuali dengan CMS Blogger yang dulunya saya tidak terlalu suka ini. Padahal sebetulnya lebih dulu mengenal wordpress self-hosted dibandingkan blogger custom domain.

Dan pada akhirnya sekarang kita berhasil menambahkan post view counter di blog kita meskipun blogspot. Dan dengan fitur yang tertanam pada theme blogger inilah jumlah tampilan setiap postingan  bisa terpantau dan terlihat juga oleh pengunjung. 

Sekian artikel kali ini tentang cara menampilkan post view counter di tiap postingan blogger. Selamat mencoba dan semoga berhasil.

Baca Juga