Hello sobat ICloudzer kali ini admin bakalan menjabarkan mengenai cara membuat visitor counter menggunakan firebase di blogger
Info: Jika kamu penasaran dengan pembahasan kita kali ini yuk langsung aja kita bahas bersama sama
Visitor counter
Apa itu visitor counter? visitor counter merupakan fitur untuk mengkalkulasi jumlah pengunjung pada suatu halaman pada website atau lebih tepatnya widget visitor counter akan menampilkan jumlah pengunjung blog secara real time
Menggunakan firebase
Nah hasil kalkulasi data tersebut di peroleh berdasarkan data statistik Firebase, dan apakah itu firebase? firebase merupakan suatu layanan dari google yang di gunakan untuk mempermudah pengembangan aplikasi, sedangkan fitur yang akan kita gunakan untuk membuat widget visitor counter adalah Realtime database karena pada firur tersebut bisa kuta gunakan untuk widget visitor counter pada website ataupun blog
Cara pembuatan
Baiklah sobat ICloudzer sekarang saatnya admin bakalan menjelaskan bagaimana caranya membuat post view di blogger atau membuat widget visitor counter di blogger, silahkan baca dan ikuti setiap arahan yang bakalan admin jelaskan di bawah ini
Membuat project firebase
Langkah pertama dalam memulai pembuatan widget visitor counter adalah dengan membuat project firebase, kamu bisa mencari tau cara membuat project baru di firebase, atau pelajari melalui penjelasan singkat di bawah ini
- Sikahkan kamu kunjungi atau buka url console firebase disini
- Selanjutnya silahkan buat project baru (isi seluruh formulir yang di minta sesuai data kamu)
- Kemudian setelah berada di dashboard project, silahkan pilih menu Realtime database dan buat database realtime sesuai instruksi
- Kemudian pada tabs rules, edit atau ubah seluruh kode rules seperti contoh kode di hawah ini
- Jika sudah publish rules, dan lanjutkan ke tahapan selanjutnya, untuk membuat widget visitor counter di blogger
{
/* Visit https://firebase.google.com/docs/database/security to learn more about security rules. */
"rules": {
".read": true,
".write": true
}
}Info: Silahkan salin dan tempelkan saja kode nya agar lebih mudah
Salin url Database
Setelah kamu membuat project baru di firebase, kemudian membuat database realtime jangan lupa untuk menyimpan url data base nya, karana url database tersebut sangat berperan untuk membuat widget visitor counter di blogger, jika kalian bingung url database seperti apa, silahkan pelajari contoh url database milik ICloudice
https://rahwow53-default-rtdb.firebaseio.com/Info: Nah jika kamu baru membuat database realtime pertama kali, gunakan lokasi default saja, maka akan menjadi projectmu-default-rtdb
Penerapan script
Baikah sobat ICloudzer jika kamu sudah melakukan semua tahapan yang admin jelaskan di atas sekarang saatnya penerapan script pada website kamu, silahkan salin dan tempelkan kode script pembuat post view counter di bawah ini, di atas kode </body>
<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/><script async='async' type='text/javascript'>//<![CDATA[
$.each($(".rah-views[data-id]"), function(a, e) {var l = $(e).parent().find("#postviews").addClass("view-load"),i = new Firebase("https://rahwow53-default-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>Info: Nah pada url database nya silahkan gunakan atau ubah url database milik kalian seperti yang sudah admin jelaskan sebelumnya, atau bisa juga menggunakan url database default milik ICloudice ngak usah di ubah, jika sudah simpan template
Memfungsikan Script
Untuk menfungsikan script agar widget post view counternya aktif pada blog kamu, silahkan salin dan gunakan kode HTML di bawah ini
<div class='rah-views' expr:data-id='data:post.id'><span class='view-load' id='postviews'/> views</div>Info: Kamu bisa menaruh nya sesuai keinginan kamu aja, jika bingung silahkan tarus di atas kode <data:post.body/>
Menggunakan icon mata
Jika ingin nenggunakan icon mata pada widget post view counter nya silahkan salin dan gunakan kode CSS dan HTML di bawah ini, kemudian taruh sesuai keinginan kamu aja
<style>.rahVp{display:flex;justify-content:space-between;position:relative;font-size:13px;padding-top:6px;padding-bottom:20px;} .rahVp >*{padding:10px;background:#fefefe;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:50px;display:flex;align-items:center;justify-content:center} .rahVp >*:first-child{margin-right:5px} .rahVp >*:last-child{margin-left:5px} .Rtl .rahVp >*:first-child{margin-right:0;margin-left:5px} .Rtl .rahVp >*:last-child{margin-left:0;margin-right:5px} .rahVp .hidden{display:none}.rahVp svg{width:17px;height:17px;margin-right:6px} .rahVp svg.line{stroke-width:1.5} .Rtl .rahVp svg{margin-right:0;margin-left:6px} .drK .rahVp >*{background:#242526}</style>
<b:if cond='data:view.isPost and !data:view.isPreview'>
<div class='rahVp'>
<div class='rahVi rah-views' expr:data-id='data:post.id'><svg class='line' viewBox='0 0 24 24'><g transform='translate(2.000000, 4.000000)'><path d='M13.1643,8.0521 C13.1643,9.7981 11.7483,11.2141 10.0023,11.2141 C8.2563,11.2141 6.8403,9.7981 6.8403,8.0521 C6.8403,6.3051 8.2563,4.8901 10.0023,4.8901 C11.7483,4.8901 13.1643,6.3051 13.1643,8.0521 Z'/><path d='M0.7503,8.0521 C0.7503,11.3321 4.8923,15.3541 10.0023,15.3541 C15.1113,15.3541 19.2543,11.3351 19.2543,8.0521 C19.2543,4.7691 15.1113,0.7501 10.0023,0.7501 C4.8923,0.7501 0.7503,4.7721 0.7503,8.0521 Z'/></g></svg><span class='view-load' id='postviews'/> views</div>
<!-- Fitur lainnya disini misal <div><svg> Bacakan</div> -->
</div>
</b:if>Info: jika bingung naruhnya di mana silahkan taruh di atas kode <data:post.body/>, kemudian save template
Contoh demo
Jika penasaran dengan contoh tampilan widget post view counter nya silahkan periksa menggunakan tombol di bawah ini
Info: Bagaimana sobat contoh tampilan nya, admin menggunakan icon mata agar terlihat keren, semoga bermanfaat yak