How to Add Start Rating in Blogger

 

Hi to all, in this article I am going to tell you all about how to add star rating in your blogger website easily in just few minutes.

Advantage of using star rating

The main advantage of adding this in your blogger website is that your website visitors can rate your article and you can know how many are liked your article based on the number of stars clicked by the visitors.

How it works

Mainly this star rating will works with the help of widgetpack.com and it will work when any visitor touch the star, for example if any visitor clicked on 5 stars then the article gets 5 stars and if visitor clicked on 3 starts then the article will get 3 starts.

So read the below provided steps carefully and completely to get clear understanding about adding star rating in your blogger website without any error or issue.

Steps to Add Start Rating in Blogger Website

---

Login to Blogger website

First of all you need to visit official blogger website.

Now you need to login to your blogger website dashboard by using your login credentials safely.

Backup Blogger Theme

After login to blogger website you need to backup your blogger website theme code, if any error or issue occurs while saving the code then you can restore your backup code again and can run your website as usual.

To backup your blogger theme you can follow the below path.

Blogger website dashboard -> Click on theme section -> Click on arrow icon -> Click on backup -> Click on download theme -> Verify captcha -> Save the download file in a safe place for future use.

Open Blogger Theme Editor

After successful backup of your blogger theme code, now you need to open blogger theme editor to add the codes.

To open your website theme editor you need to follow the below provided path.

Blogger dashboard -> Click on theme -> Click on arrow icon -> Click on Edit HTML -> Blogger theme editor section.

Adding HTML Code

After opening the theme editor you need to press CTRL+F and find  <data:post.body/>.

Now copy below provided HTML code and paste the copied HTML code just 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>

Adding CSS Code

Now copy below provided CSS code and paste copied CSS code 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>

Adding JavaScript Code

Now gain copy below provided JavaScript code and paste the copied JavaScript code just above </body> or &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:view.isPost'>
 <script>/*<![CDATA[*/ 
/* Star 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:33379}),function(){var t,e;'WIDGETPACK_LOADED'in window||(WIDGETPACK_LOADED=!0,(t=document.createElement('script')).type='text/javascript',t.async=!0,t.src='https://cdn.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>

Note

---

If you get any error while saving the code then you have to restore your backup theme code and need to repeat the same process as mentioned in the above steps carefully.

If you want to change the styles and colors then you change the above provided CSS code.

If you want to change the colors then you need to replace the color codes and for color codes you can use google color picker or any other third party color picker websites.

Make sure you paste the codes in correct place, if you paste in any other place then this code will not work.

Conclusion

---

I hope that you have understood about adding star rating in your blogger website in just few few minutes by using HTML, CSS and JavaScript without any error or issue.

If you have any doubts then you can mail us or you can contact us through the contact us page.