Memasang View Counter dengan Firebase - Postingan kali ini akan membuatkan cara memasang view counter atau jumlah tampilan post yang dibaca oleh pengunjung dengan memakai Firebase.
Bagi yang ingin mencobanya, silakan ikuti langkah berikut :
1. Terlebih dahulu, buat akun Firebase di sini Firebase
2. Setelah menciptakan akun, akan muncul halaman dashboard. isi data aplikasi gres di kolom formulir kiri bawah menyerupai tumpuan di bawah ini, klik create new app.
Setelah itu klik manage app
Setelah terbuka, salin url aplikasi dan pastekan di notepad
Sebelum beranjak ke langkah selanjutnya, pastikan di template blog teman sudah terdapat jQuery library. Jika belum ada pasang arahan di bawah ini sebelum </head>
<script src='//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js'/>3. Langkah selanjutnya, buka blogger > Template > Edit HTML, salin arahan di bawah ini sempurna sebelum ]]></b:skin> atau </style>
.post-header-line-1 {overflow:hidden} .viewers{margin:10px 0;display:table;background:#fefefe;color:#333;padding:6px 12px;box-shadow:inset 0 0 0 1px #c9c9c9;cursor:default;font-weight:bold;transition:all .3s ease-out} .viewers:hover {background:#aaa;color:#fff;box-shadow:inset 0 0 0 1px #888;} .viewers .loading {display:inline-block;width:20px;height:20px;background:transparent url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjgkQnyAruOcMQ-Yk_wCw5mmrhvSM1Uz4MUb65oLT1qbp3epzh3cYfdykyz4zqZzPuvvrJZNuZvFvfH8BQtWsIXAWClbFsGYT3gjY3ecVjnYRMoDME3E6-NP0-Z5qqAoi-H5FrMbBjlKaAe/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}Kemudian salin arahan di bawah ini sempurna sebelum </body>
<b:if cond='data:blog.pageType != "index"'> <script src='http://cdn.firebase.com/v0/firebase.js' type='text/javascript'/> <script type='text/javascript'> //<![CDATA[ // View counter $(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://arlinadesign.firebaseio.com/"+n);e.once("value",function(n){var i=n.val();null==i?i=1:"/"!=window.location.pathname&&i++,e.set(i),a.children("span").removeClass("loading").html(i)})})}); //]]> </script> </b:if>Ganti arahan yang ditandai dengan url data aplikasi yang telah disimpan di notepad tadi
Selanjutnya cari arahan di bawah ini
<div class='post-header'> <div class='post-header-line-1'/> </div>Kemudian ganti menjadi menyerupai ini
<div class='post-header'> <div class='post-header-line-1'> <b:if cond='data:blog.pageType == "item"'> <div class='viewers' expr:id='"obs-" + data:post.id'>Dilihat&nbsp;<span class='loading'/>&nbsp;Kali</div> </b:if> </div> </div>Catatan : Pasang arahan di atas pada post-header yang ada di dalam markup post, menyerupai di bawah ini
<b:includable id='post' var='post'> ... ... <div class='post-header'> <div class='post-header-line-1'> <b:if cond='data:blog.pageType == "item"'> <div class='viewers' expr:id='"obs-" + data:post.id'>Dilihat&nbsp;<span class='loading'/>&nbsp;Kali</div> </b:if> </div> </div> ... ... </b:includable>4. Simpan template.
Catatan : Angka pada tampilan post bukanlah tampilan yang sebenarnya, alasannya ialah pada akun free firebase akan dibatasi. Jika tidak ingin dibatasi silakan daftar dengan akun firebase premium yang tersedia di situsnya.
Untuk selebihnya sanggup teman kreasikan kembali, terima kasih.
Referensi : https://sangdewablogger.blogspot.com//search?q=memasang-view-counter-dengan-firebase