Star Rating Widget Blogger
Star rating widget is a free blogger widget made by wendycode. I tried it. But the problem is when I implemented it in my blog. My pagespeed reduced from 95+ to lower than 83. So I did some changes in the script to load it asynchronously. Now it doesn't affect my pagespeed anymore. Remember this widget can get updates or maybe I have to switch cdn link. So if the widget doesn't work in the future revisit this post to get the latest one or fixed one.
Now this widget is made by wendycode using countapi xyz. Using the api of countapi xyz. It will be able to store and calculate the rating of you each unique blog post. The click will be get stored in browser cookie. So that a user can't rate an article more than once. But if the user deletes the cookies then it will.be able to rate it again.
This Widget Is Only For Blogger. It will not work on other cms.
Now to apply this. copy the css code below and paste it in your template css or above
]]></b:skin> code./* widget stars rating by www.wendycode.com and changes by www.infokeeda.xyz */
.rating-box .stars.pointer{pointer-events:none}
.rating-wrap{display:flex;gap:10px;padding:22px 0;border:1px solid #e4e3e1;border-left:0;border-right:0}
.rating-box{width:100%;text-align:center}
.rating-box:before{content:attr(aria-label);font-size:12px;font-weight:800}
.rating-box .stars{display:flex;justify-content:center;gap:15px;margin-top:15px}
.stars-svg{width:35px;height:35px;fill:#b5b8b1}
.stars svg.active,.stars svg:hover{fill:#ffb851;transform:scale(1.2)}
.hasil-rating{font-weight:800}
.hasil-rating:after{content:attr(aria-label);display:flex;justify-content:center;font-weight:normal;opacity:.8}
.sudahRt{display:none;margin-top:10px}
.sudahRt:after{content:attr(aria-label)}
@media screen and (max-width:480px){.hasil-rating{font-size:12px}.hasil-rating:after{font-size:11px;width:50px}.rating-box .stars{gap:10px}}
<data:post.body/> code.<!--Changes By www.infokeeda.xyz-->
<b:if cond='data:view.isPost'><div class='rating-wrap'><div aria-label='Rate This Article/Post' class='rating-box'>
<div class='stars'>
<svg class='stars-svg star1' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
<svg class='stars-svg star2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
<svg class='stars-svg star3' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
<svg class='stars-svg star4' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
<svg class='stars-svg star5' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g><path d='M179.91029,187.1513l-1.8587,1.01868a2.04864,2.04864,0,0,1-3.01773-2.10788l.42672-2.59362a4.04634,4.04634,0,0,0-1.11291-3.4963l-1.86665-1.89681a2.02973,2.02973,0,0,1,1.15871-3.4316l2.32027-.35147a4.1,4.1,0,0,0,3.095-2.29318l1.20167-2.53825a1.81714,1.81714,0,0,1,3.27783,0l1.20167,2.53825a4.1,4.1,0,0,0,3.095,2.29318l2.32027.35147a2.02973,2.02973,0,0,1,1.15871,3.4316l-1.86665,1.89681a4.04634,4.04634,0,0,0-1.11291,3.4963l.42672,2.59362a2.04864,2.04864,0,0,1-3.01773,2.10788l-1.8587-1.01868A4.13465,4.13465,0,0,0,179.91029,187.1513Z' transform='translate(-169.8956 -166.42856)'/></g></svg>
<div class='hasil-rating' data-after='Voted'/>
</div>
<div aria-label='You Already Rated This Article/Post' class='sudahRt'/>
</div>
</div>
<script>
var sharedBy = "www.wendycode.com"; // credit
var viewBlogId = "<data:blog.blogId/>";
var viewPostId = "<data:post.id/>";
/*<![CDATA[*/
function lazyOnload() {
const script = document.createElement('script');
script.src = 'https://cdn.infokeeda.xyz/blogger/star-ratingwidget.js';
script.type = 'text/javascript';
document.body.appendChild(script);
}
function dtcLzy(){lazyOnload(),localStorage.setItem("wcLoadJs","true")}var wcLdStorage=localStorage.getItem("wcLoadJs");if("true"!=wcLdStorage){var t=!1,e=!1;window.addEventListener("scroll",()=>{(0!=document.documentElement.scrollTop&&!1===t||0!=document.body.scrollTop&&!1===t)&&(dtcLzy(),t=!0,e=!0)},!0),window.addEventListener("click",()=>{!1===e&&!1===e&&(dtcLzy(),e=!0,t=!0)},!0)}"true"===wcLdStorage&&lazyOnload();
/*]]>*/
</script> </b:if>
Now save changes of your template.
You can change the yellow higlighted part text. But don't remove the wendycode and infokeeda credit. If you remove widget will not work.
Most of blogger template have 1 <data:post.body/> tag. But some templates can have more than one. For example I am using plus ui currently and it have 2 codes. So I tried pasting it after the first one it was not showing in bottom of article. So I pasted it after the second one. Now it's fully working.
Source:
www.wendycode.com/2023/03/widget-stars-rating-blogger.html