For world peace, liberate Al-Aqsa, eliminate Israel and anyone who is with Israel, they are the real terrorists
Bacakan

Membuat visitor counter menggunakan firebase di blogger

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

  1. Sikahkan kamu kunjungi atau buka url console firebase disini
  2. Selanjutnya silahkan buat project baru (isi seluruh formulir yang di minta sesuai data kamu)
  3. Kemudian setelah berada di dashboard project, silahkan pilih menu Realtime database dan buat database realtime sesuai instruksi
  4. Kemudian pada tabs rules, edit atau ubah seluruh kode rules seperti contoh kode di hawah ini
  5. {
      /* 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

  6. Jika sudah publish rules, dan lanjutkan ke tahapan selanjutnya, untuk membuat widget visitor counter di blogger

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



views


About the Author

Keindahanmu akan kuabadikan disetiap karyaku.

Post a Comment

Menghasilkan uang melalui survei berbayar
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.