Buy Plus UI v2.6! Demo Buy Now!

How to Add Automatic Rating Article Widget in Blogger

Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

Hello Blogger's How are you I hope you are doing well. I am Sadab Ali and welcome to my blog Tech Aadi.

Do you know that Rating Article Widget is very useful for your blog. That will enable the readers of your blog to rate your article and improve you.

In this article we are goting to discuss about How to Add Automatic Rating Article Widget in Blogger. So let's start the article and adding process.

How to Add Automatic Rating Article Widget in Blogger

For adding you have to only follow some simple steps thats all. But follow it carefully.

Before starting please backup your blog template for any kind of errror and easy restoration process.

Adding Automatic Rating Article Widget

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please change it, you can replace the marked class with your template dark mode class.

/* Article Rating by Fineshop */
.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}
.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}

Step 6: Now add the following HTML just below to <data:post.body/>.

<b:if cond='data:view.isPost'>
  <!--[ Article Rating by Fineshop ]-->
  <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>

Step 7: Now add the following JavaScript Code just above to </body> tag. If you don't find it, it is probably already parsed which is <!--</body>--></body> or &lt;/body&gt;.

Following is Lazyload JavaScript, so don't worry about Lighthouse, Performance and Loading Speed. Anything will not be affected.

<b:if cond='data:view.isPost'>
  <script>/*<![CDATA[*/ /* Article Rating Script by Fineshop (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='',(e=document.getElementsByTagName('script')[0]).parentNode.insertBefore(t,e.nextSibling))}();document.querySelector('#pRating').style.display='block';}(),lazyrs=!0)},!0); /*]]>*/</script>

If you have already added Rating Widget by Widget Pack on your website and you are going to replace it with this Widget, replace the marked Rating ID with the old Widget Rating ID or create a new Rating Widget ID here. Keep as it is if you don't have idea about it because we do not want you to face any difficulty.

Step 8: Lastly, Save the changes by clicking on this icon

Now all steps are completed i hope after following the above steps you have successfully installed the Automatic Rating Article Widget in you blog.


So this is all about How to Add Automatic Rating Article Widget in Blogger. I hope you like this article if you any query kindly do comment below. Stay tuned with us for more post like this.


Getting Info...

About the Author

Hello Friends. Welcome to my website. I hope you all are doing good. If you like our work. Please revisit again. And do like and follow our blogs.

Buy me a Coffee

Post a Comment

Please do not spam in the comment section or your comment will not be approved.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.