Cara Menampilkan Post Views Counter Blog Amp Dan Non Amp
Post views adalah salah satu widget yang kita bisa gunakan untuk melihat atau menampilkan jumlah pengunjung blogspot di setiap postingan artikel.Dengan widget post views counter anda akan tahu berapa banyak yang membaca artikel , Dan juga memonitor artikel mana yang banyak di baca oleh pengunjung.
Perbedaan Post View Counter Dan Widget Statistik Pengunjung Blogger
Perberbeda post views counter dengan widget statistik pengunjung blogger adalah statistik pengunjung hanya bisa menampilkan keseluruhan jumlah kunjungan blog yang di hitung, Akan tetapi post views counter ini bisa menghitung jumlah kunjungan di setiap artikel atau postingan yang kita terbitkan.Jadi widget statistik pengunjung menghitung jumlah dari keseluruhan kunjungan, Sedangkan post views counter menghitung jumlah postingan di setiap artikel.
Blogger sendiri telah menyediakan widget visitor counter/statistik pengunjung untuk bisa kita tambahkan dengan mudah di menu widget blogger, akan tetapi untuk post views counter blogger sendiri belum menyediakannya.
Post views counter bisanya di tampilkan di blog wordpress dengan menambahkan plugin post views dan tentunya ini membutuhkan hosting.
Lalu bagaimana dengan blogger apakah untuk membuat post views counter membutuhkan hosting ? Tenang saja kita bisa membuat widget post views tanpa perlu hosting , di sini saya akan menggunakan layanan dari pihak ketiga yaitu script dari Firebase
Jadi kita bisa membuat post views counter dengan cara menyimpan databasenya di firebase.Firebase adalah salah satu produk dari google yang bisanya saya manfaatkan untuk membuat widget rating bintang atau lainnya dan sekarang kita juga bisa memanfaatkan firebase untuk menampilkan post views counter di blogger.
Bagi kalian yang ingin menampilkan post views counter di blogspot baik itu blog amp ataupun non amp anda bisa mengikuti tutorial saya kali ini.
Di sini saya menggunakan script firebase terbaru jadi di pastikan ini berhasil dan berjalan dengan baik di blogspot anda.
Untuk cara penerapanya pun ada 2 cara yaitu post views counter dengan costum dan post views counter non custom
Cara Membuat Post Views Counter Dengan Non Custom
Maksud saya post views non custom adalah kita bisa menampilkan widget post views tanpa perlu membuat akun firebase terlebih dahulu dan setelah memasangnya maka views yang di tampilkan mulai "dari 0 lagi" walupun sebenarnya jumalah views postingan anda sudah banyak. Demonya seperti di bawah ini1. Masuk ke dashboard blogger lulu pilih edit HTML
2. Simpan Jquery Library dan CDN Font Awesome tepat di bawah tag <head>
<!-- Jquery Library and Font Awesome CDN --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/> <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>3. Selanjutnya simpan script di bawah ini di atas tag </body>
<script type='text/javascript'> /*! sayemtutorial-Firebase-post-view */ jQuery.getScript("//cdn.firebase.com/js/client/2.3.2/firebase.js").done(function(){$.each($(".post-view[data-id]"),function(e,a){var i=$(a).parent().find("#postviews").addClass("view-load"),t=new Firebase("https://encep-81911.firebaseio.com/pages/id/"+$(a).attr("data-id"));t.once("value",function(e){var o=e.val(),d=!1;null==o&&((o={}).value=0,o.url=window.location.href,o.id=$(a).attr("data-id"),d=!0),i.removeClass("view-load").text(o.value),o.value++,"/"!=window.location.pathname&&(d?t.set(o):t.child("value").set(o.value))})})}); </script>encep-81911 adalah ID firebase, anda bisa menggunakan ID firebase saya atau menggantinya dengan ID firebase kalian. Jika ingin menggantinya anda harus membuat ID firebase terlebih dahulu.
4. untuk menampilkan widget post views counter anda bisa menyimpannya di atas kode <data:post.body/>
Sebenarnya tergantung anda mau di tampilkan dimana widgetnya sesuai selera tentunya.Paste kode widget berikut ini di template blogspot anda
<b:if cond='data:view.isPost'><span class='post-view' expr:data-id='data:post.id'><i class="fa fa-eye" aria-hidden="true"></i> <span class='view-load' id='postviews'><i class='fas fa-spinner fa-pulse faa-fast'/></span> Views</span></b:if>5. Langkah terakhir ada bisa pratinjau terlebih dahulu dan jika rasa sudah pas langsung saja klik Save
Cara Membuat Post Views Counter Secara Costum
Dengan cara kedua ini anda bisa mengcostum jumlah views yang di tampilkan, jadi nantinya anda bisa atur sendiri jumlah views yang mau di tampilkan misalnya di sesuaikan views nya dengan views aslinya di blogspot, Atau bahkan anda bisa memanipulasi jumlah views nya biar keliatan banyak hehe. Walupun begitu views counter ini berjalan secara realtime sesuai data kunjungan postingan artikel anda.1. Langkah pertama untuk cara ini anda harus membuat akun firebase terlebih dahulu, Silahkan masuk ke firebase
2. Buat project dengan cari Klik Buat Project
3. Buat nama project, Centang kolom saya menyetujui, Klik Lanjutkan
4. Google analytics untuk project anda bisa aktifkan atau juga tidak apa-apa , klik Lanjutkan
5. Konfigurasi google analytics, pilih lokasi Indonesia, Centang semua kolom , langsung klik Buat Project
6. Sampai tahap ini buat project sudah selesai , klik lagi Lanjutkan
7. Di dashboard Firebase pilih Develop , Pilih Database lalu klik Buat Database
8. Buat Database di sini anda bisa memilih opsi " Mulai dalam mode produksi " atau " Mulai dalam mode pengujian "
9. Lokasi Firestore, Biarkan saja default dan langsung saja klik Selesai
10. Langkah selanjutnya masih di opsi Database, Pilih Realtime Database lalu block semua tulisan di kolom ganti dengan kode berikut ini
{
"rules": {
".read": true,
".write": true
}
}Kemudia paste kode tersebut di kolom lalu klik Publikasikan
11. Klik Pengaturan , Pilih setelan project untuk melihat project ID kita
12. Sampai di sudah selesai , Salin Project ID nya untuk kita pasang di template blogspot.
13. Simpan Jquery Library dan CDN Font Awesome tepat di bawah tag <head>
<!-- Jquery Library and Font Awesome CDN --> <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js'/> <link crossorigin='anonymous' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css' integrity='sha256-46qynGAkLSFpVbEBog43gvNhfrOj+BmwXdxFgVK/Kvc=' rel='stylesheet'/>14. Sekarang cari kode yang mirip seperti ini di template blogspot anda
<b:includable id='post' var='post'>Kemudian simpan kode post ID ini di bawahnya
<div expr:post-id='data:post.id'/>15. Selanjutnya untuk menampilkan widget post views counter letakan kode ini di atas
<data:post.body/>Simpan kode ini
<style>#views-container #page-views{margin-left:5px}</style>
<span id='views-container'><i class='fa fa-eye'/><span id='page-views'/>Dilihat</span>16. Langkah terakhir simpan script firebase ini di atas </body>
<script src='https://cdn.firebase.com/v0/firebase.js' type='text/javascript'/>
<script>
//<![CDATA[
const convertSize=function(t){const o=["","KB","MB","GB","TB"];if(0==t)return"0";const n=parseInt(Math.floor(Math.log(t)/Math.log(1024)));return 0==n?t+" "+o[n]:(t/Math.pow(1024,n)).toFixed(1)+" "+o[n]};
$.each($('div[post-id]'), function(i, e) {
var blogStats = new Firebase("https://encep-81911.firebaseio.com/pages/id/" + $(e).attr('post-id'));
blogStats.once('value', function(snapshot) {
var data = snapshot.val();
var isnew = false;
if(data == null) {
data= {};
data.value = 0;
data.url = window.location.href;
data.id = $(e).attr('post-id');
isnew = true;
}
$("#page-views").text(convertSize(data.value));
data.value++;
if(window.location.pathname!='/')
{
if(isnew)
blogStats.set(data);
else
blogStats.child('value').set(data.value);
}
});
});
//]]>
</script>Silahkan ganti encep-81911 dengan ID firebase yang kita buat tadi
17. langsung saja klik Save
Sekarang liat postingan anda sekarang widget post views counter sudah muncul , anda akan melihat mulai dari 0.
Untuk mengcostum post views kembali lagi ke Dashboard Firebase , Pilih data maka post ID dan Url nya otomatis akan muncul , untuk mengatur Post Views tinggal atur saja Value, misalnya 1.000 kali di lihat
Begitupun seterusnya untuk postingan baru lainnya otomatis juga akan muncul, tinggal di costum saja views nya
Cara Membuat Post Views Counter Di Blog AMP
Nah bagaimana kalu untuk blogAMP HTML , sebenarnya untuk blog amp jika blog tersebut bisa menampilkan halaman amp dan non amp , kita bisa menyimpan kode script Firebase di url non amp , maka kita bungkus semua kode-kode di atas tadi dengan kode berikut ini
<b:if cond='data:view.url != data:view.url params { amp: "1" }'>
........................
........................
</b:if>Penting pastikan langkah-langkahnya di ikuti dengan benar agar pemasangan widget post views berjalan dengan baik
Demikianlah Cara Membuat Post Views Counter Menarik di Blogger Dengan Firebase. Semoga Bermanfaat.
Rico - Reader 7/22/2020 8:18 AM
Menarik ijin coba kang
Encep Nurdin ID - Admin 7/23/2020 2:15 AM
Silahkan gan 😉