Cara membuat Post View penghitung tampilan halaman postingan.
 |
| Membuat Post Views Counter di Blogger |
Post Views Counter - 100% work
Apa itu Post views counter?
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 di Blogger ?
Langkah 1 - Account Firebase
Sebelum masuk ke Menu Dashboard Blogger, anda harus mempunyai account database firebase.
Account Database Firebase
Langkah 2 - Dashboard Blogger
1. Masuk ke Dashboard Blogger Anda.
2. Pilih Menu Tema. Kemudian Klik Edit Html.
3. Salin Kode CSS di bawah ini, kemudian tempelkan sebelum atau di atas 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>
4. 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.
5. Salin kode script 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>
Source:
Smarttechcarry
6. Terakhir - Simpan
7. Demo Tampilan
Views