Add Star Rating in Blogger_blogger widgets

 In this article we are going to check how to add star rating in Blogger.

 Hello Guys! Welcome to Shiva Technic World in this article we are going to show you how to add a star rating in Blogger. So let's check.

Advantages of using Star Rating

You, website visitors, can rate your article and you can know how much they like your article.

How Star Rating works?

This Star Rating works with the help of widgetpack.com. It will work when visitors touch the star example visitors touched the 5th star then the article gets 5 stars if visitors touch the 4th star the article will get 4 stars.

How to add Star Rating?

• 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 data:post.body

Then paste this HTML code below data:post.body

<!--Star Rating-->
<b:if cond='data:view.isPost'>    
<div class='pRate' id='pRating'>
<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>Please wait...</div>
<div class='pRateS' id='wpac-rating'/></div></div></b:if>

Then copy this CSS and paste above </head> or &lt;!--<head/>--&gt;&lt;/head&gt;

<!-- Star Rating CSS-->
  <style>
.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}</style>

Then copy this Javascript, HTML codes and paste above </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/ /* Star Rating Lazy load */ 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>

Last words!

Hope this article will helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting our site!