Cara Buat Postviews atau Penghitung Berapa Kali Artikel Dilihat di Blogger

Cara Buat Penghitung Berapa Kali Artikel Dilihat atau Postviews di Blogger
Di blog kami yang lainn, yaitu blog Jogja Harmoni memasang penghitung berapakali artikel dilihat atau postviews untuk memudahkan author/penulis blog ini mengetahui secara realtime berapa kali postingannya dilihat/dibaca. Dan angkanya baru muncul setelah halaman selesai dimuat.

Keuntungannya:
- Bisa segera melihat berapa kali artikel itu dilihat tanpa harus membuka dashboard blogger atau google analitik maupun histats.
- Praktis dan tidak memberatkan loading blog.
- Untuk blog yang memiliki lebih dari satu author/penulis sangat direkomendasikan, agar tiap penulis bisa segera tahu berapa kali artikelnya dilihat tanpa harus log in ke dashboard blogger.

Kerugiannya:
- Postviews ini memulai hitungannya dari angka nol setelah anda pasang. Jadi bagi blog-blog lama yang artikelnya sudah dilihat puluhan, ratusan, bahkan ribuan kali, maka penghitung yang tampil tetap dimulai dari angka nol. Jadi lebih cocok untuk blog yang umurnya belum terlalu lama. Tapi blog-blog lama boleh juga memasangnya 😀

Ada 2 cara yang bisa Anda terapkan yaitu:

I. Cara Instan

1. Buka dashboard blogger anda → klik Tema → klik Edit HTML.
Copy link di bawah ini:
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
dan paste-kan diatas <b:template-skin> atau <b:skin> tergantung template yang Anda pakai karena bisa berbeda-beda.
Kalau di template yang Anda pakai sudah ada link ke fontawesome, maka langkah nomor satu ini bisa Anda lewatkan. Tapi jika nanti icon penghitungnya tidak muncul, maka link diatas bisa Anda pasang supaya icon dari fontawesome-nya bisa muncul.

2. Copy kode di bawah ini:
.post-view{font-size: 15px;}
dan paste-kan diatas ]]></b:skin>

3. Klik di area kode di bawah ini → klik select all → copy. Nanti paste-kan diatas </body> :
<script src='//cdn.firebase.com/js/client/2.2.1/firebase.js' type='text/javascript'/>
<script type="text/javascript">
//<![CDATA[
$.each($(".post-view[data-id]"), function(a, e) {
var l = $(e).parent().find("#postviews").addClass("view-load"),
i = new Firebase("https://postviews-umum-jogja-harmoni.firebaseio.com/pages/id/" + $(e).attr("data-id"));
i.once("value", function(a) {
var n = a.val(),
t = !1;
null == n && (n = {}, n.value = 0, n.url = window.location.href, n.id = $(e).attr("data-id"), t = !0), l.removeClass("view-load").text(n.value), n.value++, "/" != window.location.pathname && (t ? i.set(n) : i.child("value").set(n.value))
})
});
//]]>
</script>
4. Langkah terakhir adalah memunculkan aplikasi penghitung di blog. Ini langkah yang paling rumit karena tiap template bisa berbeda-beda. Admin juga beberapa kali melakukan percobaan sampai aplikasi penghitungnya bisa muncul di tempat yang Mimin inginkan, yaitu di akhir postingan.
Copy kode penampil postviews-nya di bawah ini:

<span class='post-view' expr:data-id='data:post.id'><i class='fa fa-bar-chart'/> Dilihat: <span class='view-load' id='postviews'><i class='fa fa-spinner fa-spin '/></span> Kali</span>

Lalu coba cari kode:
<!-- clear for photos floats -->
biasanya ada lebih dari satu kode seperti di atas, pilihlah kode yang kedua. Lalu gulirkan cursor/mouse sedikit ke bawah barangkali Anda akan menemukan kode seperti ini:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
Kalau ada, coba paste-kan kode penampil postviews-nya di bawahnya.

Di template lain Admin pernah coba menaruh kode penampil postviews-nya di bawah kode:
<data:post.body/>
Kalau ada lebih dari satu kode semacam diatas, pilih kode yang paling terakhir. Dan postviews muncul diatas postingan, sejajar dengan meta author dan kalender. Bisa Anda coba cara itu.

Jika belum berhasil muncul juga, coba paste-kan kode penampil aplikasi postviews di atas widget tombol share, biasanya ada kode semacam ini:
<b:includable id='shareButtons' var='post'>

Dan bisa Anda coba terus sampai aplikasi postviews-nya muncul di tempat yang Anda inginkan.

[next]

II. Cara Tidak Instan Tapi Lebih Aman 😅


Maksudnya apa Min? koq ada cara nggak instan tapi aman?
Begini, sebenarnya cara yang pertama diatas, databasenya tersimpan di file database punya Mimin yang tersimpan di Firebase  Google. Jika Mimin, baik sengaja/tidak mengubah kodenya, atau saya hapus, maka postviews yang telah Anda pasang bisa menjadi tidak berfungsi. Begitu pula kalo penyimpanan data tersebut dipakai oleh banyak orang, kemungkinan postviews-nya bisa bekerja lebih lemot, karena penghitungan postviews itu secara realtime.

Solusinya??
Anda bikin penyimpanan data sendiri untuk postviews blog anda. Begini langkah-langkahnya:

1. Buka (klik) FIREBASE kemudian log in memakai akun google Anda (akun gmail Anda). Dan klik di bagian "MEMULAI"

2. Klik dibagian "Buat Proyek Baru" atau "Tambahkan Proyek"


3. Akan muncul pop up, isi Nama proyek dengan nama blog Anda. Terus edit Lokasi dan pilih negara: Indonesia. Sedangkan (Cloud Firestore) tidak perlu diubah, biarkan tetap di setelan: us-central. Kemudian gulir ke bawah dan centang di bagian 'Gunakan setelan...dts' dan centang  'Menyetujui". Kemudian klik "Buat Proyek".


4. Tunggu prosesnya sampai muncul 'Project baru Anda sudah siap'...dan klik 'Lanjutkan'

5. Lihat di bagian sidebar kiri. Dibawah 'Develop'..klik di bagian 'Database'

6. Admin pernah mencoba memilih yang Beta Version...tapi gagal. Jadi gulir saja cursor/mouse Anda ke bawah.

7. Pilih Realtime Database dan klik 'Buat database'

8. Kalau Anda memilih 'Mulai dalam mode terkunci' , silahkan bereksperimen dengan mengganti ".read": false menjadi ".read": true . Jadi kode anda masih bisa dibaca maupun dipakai orang lain, tapi orang lain tidak bisa mengubahnya. Terus klik 'Aktifkan'.

9. Atau Anda pilih saja yang kedua 'Mulai dalam mode pengujian' dan klik 'Aktifkan'. Mimin sendiri memilih pilihan yang kedua ini, lebih praktis tanpa ribet.

10. Kemudian akan muncul link project Anda (https://nama projek anda.firebaseio.com/). Copy link tersebut dan paste-kan/simpan sementara di notepad. Selanjutnya tutup Firebase Anda.

11. Selanjutnya ikuti langkah-langkah seperti di Cara I (Cara Instan), hanya saja untuk Java Script-nya (langkah no.3) dibagian:
https://postviews-umum-jogja-harmoni.firebaseio.com/pages/id/
diganti dengan link database yang telah Anda dapatkan dari Firebase dan telah Anda simpan sementara di notepad. Dan menjadi:
https://nama project anda.firebaseio.com/pages/id/

Selamat mencoba 👍


*|tim admin

Post a Comment

Lebih baru Lebih lama