Blog Post Views For Blogger
ဒါက တော့မိမိ Blog Site မှာတင်ထားတဲ့ Blog Post တခုချင်းစီကိုလူဘယ်နှစ် ယောက်ဝင် ရောက်ကြည့်ရှုထားသလဲဆိုတာကိုဖော်ပြ ပေးမဲ့ Widget လေးပါ။ပြုလုပ်ပုံပြုလုပ်နည်းကိုလဲ အောက်မှာရှင်းပြပေးထားပါတယ်
Browser မှာ firebase.google.com လို့ရေးရှာပါ။မရှာချင်ရင်လဲအောက်က link ကိုနှိပ်၍ဝင်ရောက်နိုင်ပါတယ်
No(1) firebase.google.com ကိုနှိပ်
No(2) ဘေးနားက Menu ဘားကိုနှိပ်
No(3) Go to console ကိုနှိပ်
No(4) Create a Project ကိုနှိပ်
No(5) မိမိ Project name ကိုရေးပါ
No(6) Continue ကိုနှိပ်
No(7) Continue ကိုနှိပ်
No(8) 1. Select an account ကိုနှိပ်
2. Create a new account ကိုနှိပ်
No(9) 1. firebase project name ထည့်ပေးပါ
2. အမှန်ခြစ် လေး တွေ လိုက်ခြစ် ပေးပါ
3. Create Project ကိုနှိပ်
No(10) Continue ကိုနှိပ်
No(11) Menu ဘားကိုနှိပ်
No(12) Build ကိုနှိပ်
No(13) Realtime Database ကိုနှိပ်
No(14) Create Database ကိုနှိပ်
No(15) Next ကိုနှိပ်
No(16) Start in locked mode ကိုနှိပ်
No(17) Enable ကိုနှိပ်
No(18) Rules ကိုနှိပ်
No(19) အဲဒီနေရာမှာ အောက်ကလုံခြုံ ရေး Code တွေထည့် ပေးပါ။
{
"rules": {
".read": true,
"BlogID_0000000000000000000": {
".read": true,
"$post_id": {
".write": "newData.exists() && (data.exists() ? newData.val() == data.val() + 1 : newData.val() == 1)",
".validate": "newData.isNumber() && newData.val() % 1 === 0.0 && newData.val() <= 99999999"
}
}
}
}
No(20) BlogID_0000000000000000000 နေရာတွင်မိမိရဲ့ Blog ID ပြောင်းထည့် ပေးပါ
No(21) Publish ကိုနှိပ်
No(22) Data ကိုနှိပ်
No(23) အဲဒီ link ပုံလေးကိုနှိပ်၍ Copy ယူပြီးမိမိအဆင်ပြေမဲ့နေရာမှာခဏမှတ်ထားပါ။ကဲဒါဆို firebase account တခုရသွားပါပြီ။အောက်က code တွေထည့်ရန်မိမိရဲ့ Website Template ကိုပြန်သွားရပါမယ်။
No(1) မိမိ blog site ကို account အရင်ဝင်ပါ
No(2) dashboard ထဲက Theme ကိုနှိပ်
No(3) Customize ဘေးက 🔻ကိုနှိပ်
No(4) Edit HTML ကိုနှိပ်
No(5) ]]></b:skin> ကိုရှာတွေ့ပြီဆိုရင်အောက်က code ကိုအဲဒီ ]]></b:skin> အ ပေါ်ကနေထည့်ပေးပါ
.entry-views{color:#000;font-size:14px;visibility:hidden;opacity:0;transition:all .2s ease}
.entry-views[data-view]{visibility:visible;opacity:1}
.entry-views::after{content:attr(data-view) ' views'}
No(6)အောက်က code ကိုလောလောဆယ် <data:post.body/> အပေါ်မှာကပ်လျက်ထည့်ပေးပါ။နောက်မှမိမိလိုသလိုရွှေ့ပြောင်းထည့်လို့ရပါတယ်
<span class='nld_view entry-views hidden' data-add='true' expr:data-id='data:post.id'/>
No(7) အောက်က JavaScript code ကို </body> အပေါ်ကနေကပ်လျက်ထည့်ပေးပါ
No(8) 1။ 0000000000000000000 နေရာတွင်မိမိရဲ့ Blog ID ထည့်ပေးပါ
2။ https://khinmaungwin-123-default-rtdb.firebaseio.com နေရာမှာမိမိ firebase account ပြောင်းထည့် ပေးပါ။ save ကိုနှိပ်ပြီးပါပြီ
<script>
/*<![CDATA[*/
const viewSeting = {
blogID: '0000000000000000000',
databaseUrl: 'https://khinmaungwin-123-default-rtdb.firebaseio.com',
abbreviation: true,
lazyload: true
}
function loadJs(e, b, c, d) {
let a = document.createElement("script");
b && (a.id = b), a.async = c, a.defer = c, a.src = e, d && (a.onload = d), document.getElementsByTagName("head")[0].appendChild(a)
}
function abvr(a) {
var b = Math.sign(Number(a));
return 1e9 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e9).toFixed(2) + "B" : 1e6 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e6).toFixed(2) + "M" : 1e3 <= Math.abs(Number(a)) ? b * (Math.abs(Number(a)) / 1e3).toFixed(2) + "K" : Math.abs(Number(a))
}
function loadPostVw() {
for (var c = document.querySelectorAll(".nld_view"), e = firebase.database(), a = 0; a < c.length; a++) {
var d = c[a],
b = d.getAttribute("data-id");
(b = e.ref("BlogID_" + viewSeting.blogID + "/PostID_" + b)).once("value", function(a, b) {
return function(c) {
0 < (c = c.exists() ? c.val() : 0) && (a.setAttribute("data-view", viewSeting.abbreviation ? abvr(c) : c), a.classList.remove("hidden")), "true" == a.getAttribute("data-add") && (a.setAttribute("data-add", !1), c = parseInt(c) + 1, b.set(c))
}
}(d, b))
}
}
function postVw() {
loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-app.js", "fb-app", !0, () => {
loadJs("https://www.gstatic.com/firebasejs/8.10.1/firebase-database.js", "fb-db", !0, () => {
var a = {};
a.databaseURL = viewSeting.databaseUrl, firebase.initializeApp(a), loadPostVw()
})
})
}
if (!0 === viewSeting.lazyload) {
var a = [],
b = [];
let c = () => {
0 == a.length && null == localStorage.getItem("LZ_VIEW") && (localStorage.setItem("LZ_VIEW", 1), postVw())
};
window.addEventListener("scroll", a => {
(0 != document.documentElement.scrollTop && 0 == b.length || 0 != document.body.scrollTop && 0 == b.length) && c()
}, !0), document.getElementsByTagName("body")[0].addEventListener("click", a => {
c()
}), localStorage.getItem("LZ_VIEW") && postVw()
} else postVw()
/*]]>*/
</script>