Star Rating System In Blogger
ဒါက တော့မိမိ Website ကိုလာရောက်လည်ပတ်တဲ့ Customer တွေအနေနဲ့မိမိတင်ထားတဲ့ Blog Post အကြောင်းအရာတွေကိုကြိုက်နှစ်သက်တယ်ဆိုရင်အဲဒီ Blog Post ကိုကြယ်ပွင့်အဆင့်သတ်မှတ် ပေးလို့ရ အောင်ပြုလုပ်ထားတဲ့ Widget လေးဖြစ်ပါတယ်။အဲဒီ Star Raining Widget လေးထည့်သွင်းအသုံးပြုနိုင်ရန်မိမိမှာ firebase database account တခုလိုအပ်ပါတယ်။ထို firebase database account ကိုအောက်ကနည်းလမ်းအတိုင်းပြုလုပ် ပေးပါ။
No(1) firebase.google.com ကိုနှိပ်
No(2) go to console ကိုနှိပ်
No(3) Create a project ကိုနှိပ်
No(4) မိမိ project name ကိုရေးပါ
No(5) Continue ကိုနှိပ်
No(6) google Analytics ကိုပိတ်ထားလဲရသလိုဖွင့်ထားလဲရပါတယ်။ Continue ကိုနှိပ်
No(7) Default Account for Firebase ကိုရွေး
No(8) Create project ကိုနှိပ်
No(9) Continue ကိုနှိပ်
No(10) Build ကိုနှိပ်
No(11) Realtime Database ကိုနှိပ်
No(12) Create Database ကိုနှိပ်
No(13) Next ကိုနှိပ်
No(14) Start a locked mode ကိုရွေး
No(15) Enable ကိုနှိပ်
No(16) Rules ကိုနှိပ်
No(17) အဲဒီမှာရှိ နေတဲ့ code တွေကိုအောက်က code တွေနဲ့ချိန်းပေးပါ။
{
"rules": {
"StarRatingSystem": {
"$0O": {
".read": true,
".indexOn": [
"OO",
"O0"
],
"$pass": {
".write": "$0O==='yourwebsitelinkhere_com'",
".validate": "newData.hasChildren(['OO','O0'])",
"OO": {
".validate": "newData.val()>0&&newData.val()<=1&&newData.isNumber()"
},
"O0": {
".validate": "!data.exists()?newData.val()===1:newData.val()===data.val()+1"
},
"$00": {
".validate": false
}
}
}
}
}
}
No(18) yourwebstelinkhere_com နေရာမှာမိမိရဲ့ website လိပ်စာ ပြောင်းထည့် ပေးပါ။
No(19) publish ကိုနှိပ်
No(20) Data ကိုနှိပ်
No(21) link ပုံကိုနှိပ်၍ copy ယူပြီးတခြား နေ ရာမှာခဏမှတ်ထားပါ။ပြီးပါပြီ
ကဲဒါဆိုရင် firebase database account တခုရသွားပါပြီ။နောက်တဆင့်အနေနဲ့မိမိ website ကိုပြန်သွား၍အောက်ကအတိုင်းလိုက်လုပ် ပေးရပါမယ်။
No(1)မိမိ website account ဝင်ပါ
No(2) dashboard ထဲက Layout ကိုနှိပ်
No(3)Add a Gadget ကိုနှိပ်
No(4) HTML/JavaScript ကိုနှိပ်
No(5) အောက်က Code တွေကို Copy ယူပြီးထည့်
<script>
var starRatingSystemSettings = {
"postPage" : {
"firebaseURL" : "your-firebase-link",
"fullStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png",
"emptyStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png",
"hoverStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rw_5c7cnEKaMYIXwaNk-vVihd4KTmKh_rLrhJGR8Ph1QrRGsODV-18NhE2OpqNWeU0bHGzhsMfEot0Izwa70onkHNpm_CJvbO4XVIr8xAueVMFNF5LqeXskq_0dNOKGNntO_pgVEm1Y/s1600/srs2.png",
"numberOfStars" : "5",
"starSize" : "30",
"textSize" : "15",
"textColor" : "#292929",
"fontFamily" : "Georgia, serif",
"align" : "center",
"topText" : "Rating:",
"bottomText" : "Average: $average$ / $max$ ($votes$ votes)",
"thankYouText" : "Thanks for voting",
"blockingText" : "You have already cast your vote, your rating is $userRating$.",
"position" : "bottom",
"status" : "active"
},
"indexPage" : {
"firebaseURL" : "your-firebase-link",
"fullStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png",
"emptyStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png",
"hoverStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rw_5c7cnEKaMYIXwaNk-vVihd4KTmKh_rLrhJGR8Ph1QrRGsODV-18NhE2OpqNWeU0bHGzhsMfEot0Izwa70onkHNpm_CJvbO4XVIr8xAueVMFNF5LqeXskq_0dNOKGNntO_pgVEm1Y/s1600/srs2.png",
"numberOfStars" : "5",
"starSize" : "30",
"textSize" : "15",
"textColor" : "#292929",
"fontFamily" : "Georgia, serif",
"align" : "center",
"topText" : "Rating:",
"bottomText" : "Average: $average$ / $max$ ($votes$ votes)",
"thankYouText" : "Thanks for voting",
"blockingText" : "You have already cast your vote, your rating is $userRating$.",
"position" : "none",
"status" : "readonly"
},
"staticPage" : {
"firebaseURL" : "your-firebase-link",
"fullStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjCQOzXM_msysnCUG8KPm4gK-5kMtViW-ceTbbG2FTpQK6SpbyLQGgnDVFgl02cBHZ7uUhLF8e8RL4HRgus7f6rB8SO1TBU_o2ctbAurdStU6Fu76foyPZdn1WtFRK41mILW6E3eNskYII/s1600/srs3.png",
"emptyStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIoe4JlpS7IXKd_7JWq-Z8iuG_d24Z6Jk9lQxtdI_Q16nSIr3CXlZY_d_-I5yViR8jr_HlBPw2rLAD4iB5_RonNPeFTYX9YUr_c9FPheGWS3Yt5Q0HOaVK2OFK2rqAOfLlosMDREk9J7o/s1600/srs1.png",
"hoverStarImg" : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0rw_5c7cnEKaMYIXwaNk-vVihd4KTmKh_rLrhJGR8Ph1QrRGsODV-18NhE2OpqNWeU0bHGzhsMfEot0Izwa70onkHNpm_CJvbO4XVIr8xAueVMFNF5LqeXskq_0dNOKGNntO_pgVEm1Y/s1600/srs2.png",
"numberOfStars" : "5",
"starSize" : "30",
"textSize" : "15",
"textColor" : "#292929",
"fontFamily" : "Georgia, serif",
"align" : "center",
"topText" : "Rating:",
"bottomText" : "Average: $average$ / $max$ ($votes$ votes)",
"thankYouText" : "Thanks for voting",
"blockingText" : "You have already cast your vote, your rating is $userRating$.",
"position" : "bottom",
"status" : "active"
}
}
</script>
<script>/*<![CDATA[*/
!function(){if("undefined"==typeof BloggerRatingGenerator){let n=[".post",".post-outer","article",".item",".blog-post",".hentry",".index-post"],o=[".post-title","h1","h2","h3"],s=["#main","#Blog1","#Blog00"];function t(e){if("A"===e.tagName&&e.getAttribute("href")){let r=e.getAttribute("href").split("?")[0].split("#")[0];return 0===r.indexOf(location.protocol+"//"+location.host)&&/.*\/\d{4}\/\d{2}\/.*\.html/.test(r)?e:e.parentNode&&"main"!==e.parentNode.id&&e.parentNode!==document.body?t(e.parentNode):null}}function e(t){let e=t.split("?")[0].split("#")[0].replace("https:","").replace("http:","").replace("file:","").replace("ftp:","").replace("mailto:","");for(;"/"==e[0];)e=e.substring(1);for(0===e.indexOf("www.")&&(e=e.replace("www.",""));"/"==e[e.length-1];)e=e.substring(0,e.length-1);return e=e.replace(/\./g,"_").replace(/\//g,"__").replace(/\,/g,"___").replace(/\s/g,"")}function r(t,r,l,i){let n=document.createElement("div");n.setAttribute("class","BloggerStarRating"),"insertAfter"===l?t.parentNode.insertBefore(n,t.nextSibling):t.appendChild(n);let o=document.createElement("script");for(let t in i)o.setAttribute(t,i[t]);o.setAttribute("ratingName",e(r)),o.src="https://cdn.jsdelivr.net/gh/starratingsystem/script@1.0.1/starrater.js",n.appendChild(o)}function l(t,l){let i,s,a=e(location.href);"top"===l.position?(i=o,s=n):(i=n,s=o);for(let e=0;e<i.length;e++){if(t.querySelector(i[e])){r(t.querySelector(i[e]),a,"top"===l.position?"insertAfter":"appendChild",l);break}if(e===i.length-1)for(let e=0;e<s.length;e++){if(t.querySelector(s[e])){r(t.querySelector(s[e]),a,"top"===l.position?"appendChild":"insertAfter",l);break}if(e===s.length-1){let t=document.createElement("div");document.body.appendChild(t),t.style.display="block",t.style.position="fixed",t.style.left="0",t.style.bottom="0",t.style.background="lightblue",t.style.borderTop="1px solid black",r(t,a,"appendChild",l)}}}}function i(e,l){for(let i=0;i<n.length;i++){if(e.querySelector(n[i])){e.querySelectorAll(n[i]).forEach(e=>{if(!e.querySelector(".BloggerStarRating")){let i=e.querySelectorAll("a[href]");if(i.length)for(let n=0;n<i.length;n++){let o=i[n].getAttribute("href").split("?")[0].split("#")[0];if(0===o.indexOf(location.protocol+"//"+location.host)&&/.*\/\d{4}\/\d{2}\/.*\.html/.test(o)){r(i[n],o,"insertAfter",l);break}if(n===i.length-1){let i=t(e);i&&r(i,i.getAttribute("href"),"insertAfter",l)}}else{let i=t(e);i&&r(i,i.getAttribute("href"),"insertAfter",l)}}});break}if(i===n.length-1){let t=[];e.querySelectorAll("a[href]").forEach(e=>{let i=e.getAttribute("href").split("?")[0].split("#")[0];0===i.indexOf(location.protocol+"//"+location.host)&&/.*\/\d{4}\/\d{2}\/.*\.html/.test(i)&&t.indexOf(i)<0&&(r(e,i,"insertAfter",l),t.push(i))})}}}!function t(e){/in/.test(document.readyState)?setTimeout(function(){t(e)},100):e()}(function(){let t=document.body;for(let e=0;e<s.length;e++){document.querySelector(s[e])&&(t=document.querySelector(s[e]));break}/.*\/\d{4}\/\d{2}\/.*\.html/.test(location.href.split("?")[0].split("#")[0])?l(t,starRatingSystemSettings.postPage):/.*\/p\/.*\.html/.test(location.href.split("?")[0].split("#")[0])?l(t,starRatingSystemSettings.staticPage):(i(t,starRatingSystemSettings.indexPage),setInterval(function(){i(t,starRatingSystemSettings.indexPage)},1e3))})}else BloggerRatingGenerator=!0}();
/*]]>*/</script>
<style>
.mainbar .BloggerStarRating, .sidebar .BloggerStarRating{
display: none;
}
.post .BloggerStarRating{
display: flex !important;
justify-content: center;
}
</style>
No(5) your - firebase - link နေရာ 3 နေရာစလုံးတွင်မိမိ firebase database link နဲ့ပြောင်းထည့်ပေးပါ။
No(6) save ကိုနှိပ်ပြီးပါပြီ။