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

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

- 11

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

Last update

11 Comments

+ Add
kalau untuk menampilkan di homepage, di setiap thumbnail gimana caranya?
Mungkin ada contohnya kya gimna mas
kaya diblog mas ini
Itu pake class mas, dan sudah di modifikasi
saya request tutorial detainya mas..
Buka nya mas juga pakai ya
itu bawaan template mas. saya pengen pasang di sini https://median-ui-tutorial.blogspot.com/
iya mas saya rekwes juga buat di halaman depan kaya blog ini
itu yang 68 https://i.ibb.co/8NFXWNf/Screenshot-6.jpg
https://i.ibb.co/8NFXWNf/Screenshot-6.jpg
Siap mas
Add Comment

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


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

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

Realtime View Counter using Firebase Database