Cara Memasang Posts Views Blogspot
Memasang posts viewed (postingan di lihat) di blogspot ini gampang-gampang sulit menurut saya hehe, sobat bisa gunakan data penyimpanan (database) dengan firebase untuk menyimpan jumlah pengunjung yang melihat postingan yang telah di terbitkan di blog pribadi sobat secara realtime.
Sebelum memulai pemasangan di blog sobat, saya merekomendasikan untuk memahami tulisan yang saya tuliskan di bawah ini agar di blog sobat bisa berjalan secara efektif dan tidak terjadi error atau kasus tidak tampil (not work).
Baik saya akan langsung saja.
Pertama kunjungi https://firebase.google.com/?hl=id dan lakukan pendaftaran jika belum memiliki akun atau sebaliknya.
Selanjutnya tambahkan proyek di halaman selamat datang dan isi sesuai yang di ingikan sobat. seperti contoh gambar di bawah ini :
Dan lakukan pengaturan untuk akses database sobat, seperti gambar di bawah ini :
Atau sobat bisa copy dan paste kode di bawah ini
// These rules require authentication
{
"rules": {
".read": true,
".write": true
}
}
Jika persiapan sudah siap, sekarang tinggal pemasangan di blog.
Sekarang sobat beralih ke Tema > Edit HTML dan lompati ke Widget Blog1 terus temukan dimana postingan sobat di looping seperti contoh di bawah ini pada template saya
Lihat contoh gambar di atas terdapat class posts, itu adalah element pertama untuk tampilan posting yang nantinya di tampilkan lebih dari satu seperti contoh di gambar di bawah ini
Jika sudah memahaminya, selanjutnya sobat menentukan dimana posisi element Posts Viewed yang ingin sobat tampilkan di postingan, contoh kasus pada template saya, saya memasang nya di bawah judul postingan dengan tampilan seperti contoh di bawah ini
Lihat gambar di atas terdapat id="js-post-viewer" itu adalah element yang nanti nya di eksekusi oleh javascript dan jquery untuk menampilkan Posts Viewed. sobat bisa menyamakan element tersebut di template pribadi sobat atau bisa copy dan paste di bawah ini
<span id='js-post-viewer'> <i class='fa fa-eye'/> <abbr class='posts-viewer'>Loading...</abbr> views</span>
Sekarang copy dan paste kode dibawah ini di dalam <head> atau di dalam <body> satu saja bebas mau di <head> atau di <body>
<!--Firebase Posts Views-->
<script defer="defer" type="text/javascript">//<![CDATA[
/* Firebase URL untuk menampilkan posts views */
var firebaseInit = false; // set true || false
var firebaseHost = "https://url-firebase-sobat/bebas/";
//]]></script>
<b:if cond='data:blog.pageType in {"item", "index"}'>
<script defer="defer" type="text/javascript">//<![CDATA[
if(firebaseInit == true) {
document.write('<scr'+'ipt defer="defer" src="https://cdn.firebase.com/js/client/2.2.3/firebase.js"></scr'+'ipt>')
}
else {
window.addEventListener('DOMContentLoaded',function(){(function($){$(document).ready(function(){
$('.posts').each(function(){
$(this).find('#js-post-viewer').remove();
});
})})(jQuery)})
}
//]]></script>
</b:if>
<b:if cond='data:blog.pageType in {"item"}'>
<script defer="defer" type="text/javascript">//<![CDATA[
if(firebaseInit == true) {
window.addEventListener('DOMContentLoaded',function(){(function($){$(document).ready(function(){
/* In Items */
$('.posts').each(function() {
var _this = $(this),
title = _this.find('.entry-title > a').text().trim(),
firebasURL = firebaseHost,
firebase = new Firebase(firebasURL + title);
firebase.transaction(function(data) {
if(data == null) {
return data = 1;
}
else {
return data +1;
}
});
firebase.on('value', function(data) {
if(data.val() == null) {
var count = 0;
}
else {
var count = data.val();
}
setTimeout(function(){
_this.find('.posts-viewer').html(count);
}, 500);
});
});
})})(jQuery)})
}
//]]></script>
<b:else/>
<b:if cond='data:blog.pageType in {"index"}'>
<script defer="defer" type="text/javascript">//<![CDATA[
if(firebaseInit == true) {
window.addEventListener('DOMContentLoaded',function(){(function($){$(document).ready(function(){
/* In Index */
$('.posts').each(function(){
var _this = $(this),
title = _this.find('.entry-title > a').text().trim(),
firebasURL = firebaseHost,
firebase = new Firebase(firebasURL + title);
firebase.transaction(function(data) {
if(data == null) {
return data = 0;
}
else {
return data;
}
});
firebase.on('value', function(data) {
if(data.val() == null) {
var count = 0;
}
else {
var count = data.val();
}
setTimeout(function(){
_this.find('.posts-viewer').html(count);
}, 500);
});
});
})})(jQuery)})
}
//]]></script>
</b:if>
</b:if>
Ganti kode var firebaseInit = false menjadi TRUE
Ganti kode var firebaseHost = URL FIREBASE HOST yang terdapat di situs firebase
Perhatian : bahwa kode di atas sudah saya sesuaikan antara halaman "item" dan "index" yang dimana pada halaman "item" itu adalah penambahan data ke database dan selain itu hanya membaca data dari database dengan auto penambahan data pada judul postingan ke database dengan nilai 0. Sedangkan halaman "static_page" dan "error_page" tidak saya pasang. Jadi inti nya pada halaman "item", sobat harus menyamakan element html pada halaman "index" untuk penambahan data setiap pengguna yang melihat postingan sobat secara keseluruhan.
Selamat Mencoba. Jika tulisan singkat ini kurang jelas jangan segan untuk bertanya terima kasih telah berkunjung.
Rumit amat bos tutorial nya kurang jelas caranya
ReplyDeleterumit nya dari mana nya bos ? tolong jelaskan
DeleteAgak bingung memahami penjelasan diatas Bang. Saya bingung mengurutkan tahap demi tahaPnya. Apa ada video tutorialnya Bang ? Salam dari saya, blogger pemula
ReplyDeleteiya bang memang bingung, hehe soalnya artikel ini di khususkan untuk yang sudah paham bahasa HTML sama JS dan XML blogger. insya allah diperbarui artikelnya
Deletekebetulan gak buat videonya eyy
Mas ada tutorial untuk web push notif realtime di blogger gak? kalau onesignal kan manual send notif. nah kalau dibuat setiap posting artikel baru dan publish maka otomatis mengrim notif ke yang subscribe. Kalau ada buat panduannya y mas
ReplyDeleteitu kayak auto share post, sobat bisa gunakan situs IFTTT : https://ifttt.com/ jadi setiap post baru, post tersebut akan langsung terkirim ke email subscriber via email yang sudah terintegrasi dengan feedburner. dan ane kagak paham maksud ente format notif nya kayak apa dulu terus subscriber bisa melihat notif nya dari mana ?
DeleteGan kenapa ada eror yah saat memasukan coding rule nya
ReplyDeleteerror nya apa dulu gan ? di ane mah baik baik saja
Delete