STAR RATING SYSTEM IN BLOGGER

 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 src="https://cdn.jsdelivr.net/gh/starratingsystem/blogger@1.0.0/ratingwidget.js" async></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 ကိုနှိပ်ပြီးပါပြီ။

0

0

Loading...