Memasang View Counter di Median UI, IMagz dan Fletro Pro Blogger Template

Realtime View Counter using Firebase Database

Realtime View Counter Menggunakan Freebase yang mana banyak yang penasaran bagaimana cara menggunakan di Blogger kalau kalian kunjungi blog wordpress tentu ada yang menggunakan view counter ini. 

Karena ini menggunakan Freebase Databate RESET API agar lebih optimal lagi, script ini beda yang digunakan pada template saya gunakam ini. 

Memasang View Counter di Template Blogger

Untuk menggunakan pada template kalian bisa langsung simak aja tutorial nya berikut ini. 

Sebelum kalian memasangnya alangkah baiknya backup dulu template kalian agar jika ada kesalahan bisa diganti

Cari kode ]]></b:skin> pasang kode bawah ini tepat dibawah nya :

[data-path] {
  --text-color: #000;
  --text-color-dark: #fff;
  --icon-loading: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' x='0px' y='0px' fill='%23000'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg>");
  --icon-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25'><path d='M15.58 12c0 1.98-1.6 3.58-3.58 3.58S8.42 13.98 8.42 12s1.6-3.58 3.58-3.58 3.58 1.6 3.58 3.58Z'></path><path d='M12 20.27c3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-2.29-3.6-5.58-5.68-9.11-5.68-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19 2.29 3.6 5.58 5.68 9.11 5.68Z'></path></svg>");
  --text-loading: "--- --";
  --text-loaded: attr(data-view);
  --border-color: rgba(0, 0, 0, 0.1);
  --border-color-dark: rgba(255, 255, 255, 0.2);

  line-height: 1rem;
  padding: 10px;
  border: 1px solid var(--border-color);
  border-radius: 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 14px;
  color: var(--text-color);
}
[data-path]::before {
  content: "";
  width: 20px;
  height: 20px;
  background-size: 20px;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.8;
  -webkit-mask: var(--svg-icon);
  mask: var(--svg-icon);
  background: var(--text-color);
  --svg-icon: var(--icon-loading);
}
[data-path][data-view]::before {
  --svg-icon: var(--icon-eye);
}
[data-path]::after {
  content: var(--text-loading);
  opacity: 0.8;
}
[data-path][data-view]::after {
  content: var(--text-loaded);
}
.drK [data-path] {
  --text-color: var(--text-color-dark);
  --border-color: var(--border-color-dark);
}

Selanjutnya cari kode <data:post.body/> letakan terserah dimana yang di inginkan. 

<div class='post-view' expr:data-increment='data:view.isPost ? &quot;1&quot; : &quot;false&quot;' expr:data-path='&quot;/BLOG_&quot; + data:blog.blogId + &quot;/POST_&quot; + data:post.id + &quot;/VIEWS&quot;'/>

Selanjutnya memasang kode javascript nya dimana kalian cari aja kode </body> letakan diatas kode tersebut. 

<script>
  function viewCounterLoaded () {
    const counter = new ViewCounter({
      databaseUrl: "https://example.firebaseio.com",
      selector: ".post-view",
      abbreviation: true
    });
    if (typeof infinite_scroll !== "undefined") {
      infinite_scroll.on("load", counter.init.bind(counter));
    }
  };
</script>
<script defer onload='viewCounterLoaded()' src='https://cdn.jsdelivr.net/gh/fineshopdesign/view-counter@main/build/bundle.js'></script>

Kemudian klik Save Tema

Selamat mencoba semoga bermanfaat

11 comments

  1. kalau untuk menampilkan di homepage, di setiap thumbnail gimana caranya?
    1. Mungkin ada contohnya kya gimna mas
    2. kaya diblog mas ini
    3. Itu pake class mas, dan sudah di modifikasi
    4. saya request tutorial detainya mas..
    5. Buka nya mas juga pakai ya
    6. itu bawaan template mas. saya pengen pasang di sini https://median-ui-tutorial.blogspot.com/
  2. iya mas saya rekwes juga buat di halaman depan kaya blog ini
  3. itu yang 68 https://i.ibb.co/8NFXWNf/Screenshot-6.jpg
    1. https://i.ibb.co/8NFXWNf/Screenshot-6.jpg
    2. Siap mas
1. Komentar ini, diurutkan dari yang terbaru
2. Tinggalkan komentar sesuai topik tulisan
3. Apabila ada pertanyaan diluar artikel silahkan kunjungi Ruang Obrolan.
4. Centang Beri tahu saya untuk mendapatkan notifikasi via Email ketika ada balasan
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Salin hasil parse lalu paste ke kolom komentar.


image quote pre code
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.