Taukah anda berapa banyak orang yang membaca atau membuka artikel anda setiap hari ?
Taukah anda berapa banyak orang mengklik artikel yang anda buat ?
Kini anda bisa mengetahui berapa banyak orang membaca setiap artikel yang anda buat. karena hari ini saya mau membuat tutorial yang mungkin sangat anda butuhkan. yaitu Post Views Counter. tutorial kali ini akan membahas bagaimana cara membuat post views counter pada setiap postingan. Jadi bukan hanya jumlah pengunjung saja yang di hitung, tapi dengan kode ini anda dapat mengetahui berapa banyak jumlah artikel yang di baca oleh pengunjung. dan counter ini akan muncul diakhir posting atau dibawah judul posting tergantung penempatan scriptnya.
Agar mudah diterapkan di blog milik anda saya coba susun perintah yang harus anda lakukan sebabagai berikut :
1. Anda harus mendaftar dulu melalui Firebase Google
2. Menetapkan Jquery yang sesuai diletakakkan dibawah <head>
3. Mengaktifkan aplikasi Firebase diletakan diatas </head>
4. Menentukan parameter diletakkan diatas </b:skin>
5. Meletakkan posisi counter view boleh dimana saja, contoh dibawah <data:post.body/>
yang terakhir.
6. Simpan
7. Jalankan relatime di firebase google
8. Jalankan blog anda
9. Selesai.
Sekarang kita langsung saja ke TKP :
1. Anda harus mendaftar dulu melalui Firebase Google
alamatnya di sini
- Pilih Masuk : isikan [email] dan [password] anda
- Buka Console
- Tambahkan Proyek : Masukan [Nama Proyek] - Pilih Wilayah [Indonesia]
(Contoh nama proyek : tesproyek)
- Klik [buat proyek] - Tungguuuu - [Lanjutkan]
- Perhatikan gambar 1 dibawah ini :
- Pilih [Setelan Proyek] - Simpan Id Proyek yang dilingkar merah [lihat gambar 2]
2. Sekarang anda login ke blog anda - pilih Tema - Edit HTML
3. Cari <head> letakan script ini dibawahnya :
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
4. Cari </head> letakan script ini diatasnya :
<script src="//cdn.firebase.com/v0/firebase.js" type="text/javascript"></script>
<script type='text/javascript'>
//<![CDATA[
// View counter===============================
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://priosoft.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>
// View counter===============================
$(function(){var a=$(".viewers");a.each(function(){var n=$(this).attr("id"),e=new Firebase("https://priosoft.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>
5. Perhatikan script diatas, ganti
(https://priosoft.firebaseio.com)
menjadi
(https://tesproyek-fe668.firebaseio.com)
Sesuai id proyek anda (lihat Gambar 2) diatas
6. Cari </b:skin> letakan script ini diatasnya :
.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/AVvXsEiNsa9yg2KN7h9GD88F6rpUXkfIAzzbD72REG-USFEM-h8zuMvRDg17LV50YXek29nwo2ZmSkoWaQAdvDwLU9Ymcq1JhzmsXzEebq75v9FcTsuk1k7FW5UaQpxPo-YP7D1g4bNMjtaLkSHb/s1600/loader.gif') no-repeat 0 0;vertical-align:middle}
7. Cari <data:post.body/> yang terakhir, lalu letakan script dibawah ini
(Ini Lokasi penempatan page counter anda, anda bisa pilih lokasi yang lain)
<data:post.body/>
<b:if cond='data:blog.pageType == "item"'>
<div class='viewers' expr:id='"obs-" + data:post.id'>Post view: <span class='loading'/></div>
</b:if>
8. Anda masuk kembali ke fire base dibawah [id proyek anda]
klik gambar </> lalu salin script ini lalu tempatkan sesudah </body> atau diatas </html>
<script src="https://www.gstatic.com/firebasejs/4.12.1/firebase.js"></script>
<script>
// Initialize Firebase
var config = { apiKey: "AIzaSyAExiQ1pZgSiTcqds6ZhZIrPlibILnxwP4", authDomain: "tesproyek-fe668.firebaseapp.com", databaseURL: "https://tesproyek-fe668.firebaseio.com", projectId: "tesproyek-fe668", storageBucket: "tesproyek-fe668.appspot.com", messagingSenderId: "926665188261" }; firebase.initializeApp(config); </script>
// Initialize Firebase
var config = { apiKey: "AIzaSyAExiQ1pZgSiTcqds6ZhZIrPlibILnxwP4", authDomain: "tesproyek-fe668.firebaseapp.com", databaseURL: "https://tesproyek-fe668.firebaseio.com", projectId: "tesproyek-fe668", storageBucket: "tesproyek-fe668.appspot.com", messagingSenderId: "926665188261" }; firebase.initializeApp(config); </script>
9. Simpan program anda (pekerjaan anda hampir selesai)
10. Sebelum anda menjalankan program di blog anda, anda kembali ke firebase untuk menjalankan
Generator Realtime dengan cara (lihat gambar 1)
- pilih [Develop] - [Database] - pilih [Realtime Database] - [Mulai]
- Pilih [Mulai dalam mode pengujian] - [Aktifkan] - pilih [Tutup]
10. Sekarang jalankan program blog anda, pilih salah satu posting anda bila
muncul [Page view : 1] anda sudah berhasil
11. Selamat mencoba semoga anda suskses.
0 Comments:
Posting Komentar