|
| Post Views Counter Firebase |
Post Views Counter - 100% work
Post views counter adalah penghitung tampilan pos , yang berfungsi untuk menghitung jumlah tampilan halaman pos, saat pengguna melihat artikel ke blog kita. Penghitung tampilan postingan ini sangat berguna bagi kita untuk mengevaluasi berapa banyak kunjungan yang melihat artikel halaman pos yang kita buat.
Tutorial
Bagaimana cara membuat post views counter ?. Cara membuat post views counter halaman postingan blog, ikuti langkah-langkahnya berikut ini.
Langkah #1 - Account Firebase
Sebelum masuk ke Menu Dashboard Blogger, anda harus mempunyai account database firebase. Dan untuk membuat account database firebase, silahkan kunjungi link berikut ini Account Database Firebase.
Setelah selesai dan berhasil membuat account database firebase, kemudian ikuti ke langkah #2.
Related Posts
Langkah #2 - Copy paste CSS
- Pertama Masuk ke Dashboard Blogger.
- Pilih Tema.
- Pilih Edit HTML.
- Kemudian cari kode </head>, setelah ketemu salin kode script CSS di bawah ini dan tempelkan di atas atau sebelum kode </head>.
<!--[ Post Views Counter Css ]-->
<style>
/*<![CDATA[*/
.views-counter{display:flex;justify-content:space-between;position:relative;font-family:inherit;font-size:13px;padding-top:9px;padding-bottom:20px;color:#08102b;-webkit-font-smoothing:antialiased}
.views-counter >*{padding:12px;background:#fffdfc;box-shadow:0 5px 35px rgba(0,0,0,.07);border-radius:6px;display:flex;align-items:center;justify-content:center}
.views-counter span:nth-child(2){margin-right:3px}
.views-counter svg.line{fill:none!important;stroke:#08102b;stroke-linecap:round;stroke-linejoin:round;stroke-width:1.5;width:18px;height:18px;margin-right:4px}
.views-counter svg.line .svgC{fill:none;stroke:#482dff}
/*]]>*/
</style>
Kemudian lanjut ke langkah #3.
Langkah #3 - Copy paste CSS
Cari kode </body>, dan salin kode JavaScript di bawah ini, kemudian tempelkan sebelum atau di atas kode </body>.
<!--[ Post Views Counter JavaScript ]-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js'></script>
<script> /*<![CDATA[*/ window.addEventListener('load', (event) => { jQuery.getScript("//cdn.firebase.com/js/client/2.2.1/firebase.js").done(function(){$.each($("#viewscount[data-id]"),function(h,e){var a=$(e).parent().find("#viewscount").addClass("view-load"),g=new Firebase("https://yourdatabase.firebaseio.com/pages/id/"+$(e).attr("data-id"));g.once("value",function(d){var b=d.val(),c=!1;null==b&&(b={},b.value=0,b.url=window.location.href,b.id=$(e).attr("data-id"),c=!0),a.removeClass("view-load").text(b.value),b.value++,"/"!=window.location.pathname&&(c?g.set(b):g.child("value").set(b.value))})})})}); /*]]>*/ </script>
NB :- Kalau sudah terpasang jQuery javascript , pasang satu aja.
- Ganti nama database firebase yang di sorot warna kuning, dengan nama database firebase anda.
Terakhir lanjut ke langkah #4
Langkah #4 - Copy paste HTML
Cari kode <data:post.body/>, setelah ketemu salin kode script HTML di bawah ini, kemudian tempelkan sebelum atau di atas <data:post.body/>.
<!--[ Post Views Counter ]--> <div class="views-counter"> <span><svg class="line" viewBox="0 0 24 24"><g transform="translate(2.000000, 4.000000)"><path class="svgC" 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><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"></path></g></svg><span expr:data-id="data:post.id" id="viewscount"></span>Views</span> </div>
Langkah #5 - Terakhir
Setelah selesai melakukan tahapan dari langkah 2 s/d 4, terakhir Simpan.
Demo
Demo tampilan post views counter, sebagai berikut.
Demikian cara membuat post views counter firebase atau penghitung jumlah tampilan post di Blogger, semoga bermanfaat.
Referensi :
Smarttechcarry