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

Table of Contents

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

Kami memiliki kebijakan dalam berkomentar di Blog ini :

— Dilarang promosi suatu barang
— Dilarang jika memasang link aktif di komentar
— Dilarang keras melakukan promosi iklan
— Dilarang menulis komentar yang berisi sara, bully atau cemuhan

NB :Komentar yang melanggar tidak akan ditampilkan

Kebijakan komentar yang bisa Anda temukan selengkapnya disini

Dukungan :

Jika menyukai dengan artikel blog kami, silahkan Ikuti blog ini
Comment Author Avatar
4/18/2023 8:41 pm Delete
kalau untuk menampilkan di homepage, di setiap thumbnail gimana caranya?
Comment Author Avatar
4/18/2023 8:49 pm Delete
Mungkin ada contohnya kya gimna mas
Comment Author Avatar
4/18/2023 10:24 pm Delete
kaya diblog mas ini
Comment Author Avatar
4/19/2023 8:51 am Delete
Itu pake class mas, dan sudah di modifikasi
Comment Author Avatar
4/20/2023 2:31 am Delete
saya request tutorial detainya mas..
Comment Author Avatar
4/20/2023 3:21 am Delete
Buka nya mas juga pakai ya
Comment Author Avatar
4/20/2023 2:32 pm Delete
itu bawaan template mas. saya pengen pasang di sini https://median-ui-tutorial.blogspot.com/
Comment Author Avatar
4/20/2023 2:57 pm Delete
iya mas saya rekwes juga buat di halaman depan kaya blog ini
Comment Author Avatar
4/20/2023 8:53 pm Delete
itu yang 68 https://i.ibb.co/8NFXWNf/Screenshot-6.jpg
Comment Author Avatar
4/20/2023 8:54 pm Delete
https://i.ibb.co/8NFXWNf/Screenshot-6.jpg
Comment Author Avatar
4/22/2023 4:12 am Delete
Siap mas