Mas Dar
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 ? "1" : "false"' expr:data-path='"/BLOG_" + data:blog.blogId + "/POST_" + data:post.id + "/VIEWS"'/>
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
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