Hello, friends welcome to Game Adda World. Nowadays you might see many websites using star ratings on their websites and you might be thinking about how to add the star rating to your website. So we published a tutorial for you about how to add a star rating in Blogger. So without wasting any time let's start.
First of all, let's give you some information about star rating!
How does star rating work?
It will show a 5-star rating option in your blog post when visitors click a star example visitors clicked 4th star then the post will get for star or if visitors click 5th star then the post will get a 5-star rating.
Do you want to add a star rating?
In my opinion, I will tell yes because you can know how the users rate your article and how their experience etc. Your website impression might be increased.
How to add a star rating in Blogger?
Before doing these steps please take a backup of your template.
- First, go to Blogger
- Then click on the Theme option
- Then you can see a down arrow near customize click on that
- Then click on Edit HTML
- Then press CTRL+F and find ]]></b:skin>
And copy this CSS and past above ]]></b:skin>
.pRate{display:none;padding:30px 0 10px 0}
.pRateC{display:flex;max-width:400px;margin-top:30px;padding:25px 17px;line-height:25px;background:#fff;border-radius:5px;box-shadow:0 5px 35px rgba(149,157,165,.3);font-size:16px;font-family:inherit;color:#08102b;text-align:center;justify-content:center}
.pRateC .ld{display:inline-flex;align-items:center;font-size:13px;opacity:.8}
.pRateC .ld svg{width:18px;height:18px;margin-right:5px;stroke:none !important;fill:#08102b}
.pRateS{background:#fff;position:absolute}
.darkMode .pRateC, .darkMode .pRateS{background:#252526}
.darkMode .pRateC{box-shadow:0 10px 40px rgba(0,0,0,.2);color:#fefefe}
.darkMode .pRateC .ld svg{fill:#fefefe}Then find <data:post.body/> then copy and paste this HTML code just below it
<b:if cond='data:view.isPost'>
<div id='pRating' class='pRate'>
<div class='pRateC'>
<div class='ld'><svg viewBox='0 0 50 50' x='0px' y='0px'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'/></path></svg>Getting Info...</div>
<div id='wpac-rating' class='pRateS'></div>
</div>
</div>
</b:if>Then find </body> and paste this code above it
<b:if cond='data:view.isPost'>
<script>/*<![CDATA[*/ /* Article Rating Script (Lazyload) */ var lazyrs=!1;window.addEventListener('scroll',function(){(0!=document.documentElement.scrollTop&&!1===lazyrs||0!=document.body.scrollTop&&!1===lazyrs)&&(!function(){wpac_init=window.wpac_init||[],wpac_init.push({widget:'Rating',id:32139}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://embed.widgetpack.com/widget.js',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(t,e.nextSibling))}();document.querySelector('#pRating').style.display='block';}(),lazyrs=!0)},!0); /*]]>*/</script>
</b:if>Then Save.\
Hope this article is helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting!
Have a nice day!