BLOG POST VIEWS FOR BLOGGER

 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) 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>

0

0

Loading...