Star Rating System In Blogger
ဒါက တော့မိမိ Website ကိုလာရောက်လည်ပတ်တဲ့ Customer တွေအနေနဲ့မိမိတင်ထားတဲ့ Blog Post အကြောင်းအရာတွေကိုကြိုက်နှစ်သက်တယ်ဆိုရင်အဲဒီ Blog Post ကိုကြယ်ပွင့်အဆင့်သတ်မှတ် ပေးလို့ရ အောင်ပြုလုပ်ထားတဲ့ Widget လေးဖြစ်ပါတယ်။အဲဒီ Star Raining Widget လေးထည့်သွင်းအသုံးပြုနိုင်ရန်မိမိမှာ firebase database account တခုလိုအပ်ပါတယ်။ထို firebase database account ကိုအောက်ကနည်းလမ်းအတိုင်းပြုလုပ် ပေးပါ။
- firebase.google.com ကိုနှိပ်
- go to console ကိုနှိပ်
- Create a project ကိုနှိပ်
- မိမိ project name ကိုရေးပါ
- Continue ကိုနှိပ်
- google Analytics ကိုပိတ်ထားလဲရသလိုဖွင့်ထားလဲရပါတယ်။ Continue ကိုနှိပ်
- Default Account for Firebase ကိုရွေး
- Create project ကိုနှိပ်
- Continue ကိုနှိပ်
- Build ကိုနှိပ်
- Realtime Database ကိုနှိပ်
- Create Database ကိုနှိပ်
- Next ကိုနှိပ်
- Start a locked mode ကိုရွေး
- Enable ကိုနှိပ်
- Rules ကိုနှိပ်
- အဲဒီမှာရှိ နေတဲ့ 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
}
}
}
}
}
}
- yourwebstelinkhere_com နေရာမှာမိမိရဲ့ website လိပ်စာ ပြောင်းထည့် ပေးပါ။
- publish ကိုနှိပ်
- Data ကိုနှိပ်
- link ပုံကိုနှိပ်၍ copy ယူပြီးတခြား နေ ရာမှာခဏမှတ်ထားပါ။ပြီးပါပြီ
ကဲဒါဆိုရင် firebase database account တခုရသွားပါပြီ။နောက်တဆင့်အနေနဲ့မိမိ website ကိုပြန်သွား၍အောက်ကအတိုင်းလိုက်လုပ် ပေးရပါမယ်။
- မိမိ website account ဝင်ပါ
- dashboard ထဲက Layout ကိုနှိပ်
- Add a Gadget ကိုနှိပ်
- HTML/JavaScript ကိုနှိပ်
- အောက်က 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>
- your - firebase - link နေရာ 3 နေရာစလုံးတွင်မိမိ firebase database link နဲ့ပြောင်းထည့်ပေးပါ။
- save ကိုနှိပ်ပြီးပါပြီ။
