M TALUAT

Home
blogger

How To Add Automatic Star Rating Widget For Blogger

Hello Blogmate's How are you ? I hope you are doing great. Most of you somehow will have noticed on many of blogs they have star rating in their posts which automatically appears on every post and collects data of rating.
Basically, by adding star ratings to your articles on Blogger, you can increase Google organic traffic and that of other search engines. Because using such widgets to show star rating in Google Search results is a very important method of SEO, where blog articles will be easily visible to others, which will interest visitors to click on our posts.
So today we are going to learn in this blog How To Add Automatic Star Rating Widget For Blogger , It's Benefits , and what it is ?

What Is Star Ratings?

The Star Rating Widget is a key feature used to rate every post we post on our website.It is a way of review system for the visitors by expressing their thoughts on articles becomes easier with 1 click.

In addition, adding this 5-star rating also makes the readers able to see how much quality the article is possesing.

Should You Add A 5 Star Review Widget To Your Blog?

As per my opinion , I suggest you to add this widget , it probably has alot of benifits and it had no adverse effect on your blog . I too had added this widget to my other blogs , you can see the demo below 

Benefits of Adding Star Ratings to Your Blog Articles

Google's Rich Snippets star rating has an impact on the performance of articles/blog posts in Google Search results. This method may not have a direct or immediate effect, but you will feel some benefit from your blog by setting a star rating on future blog articles.

One of the benefits of setting a Rich Snippets review score on articles/blog posts is that it can increase organic traffic for Google and other search engines, as well as increase SEO scores. And there are many other benefits that come from establishing a star rating on blog articles.

Here are the benefits after installing a review score / star rating using on blog articles in google search results :
  • You can increase SEO Score of the blog.
  • May attract visitor / visitors to click on your articles in Google search results.
  • Can increase visitors / organic visitors from both Google, Bing and others.
  • Can increase the ranking of blog articles in google search results.
  • Google AdSense can increase revenue from both MGID and other ad networks.
  • You can easily find out yourself Other Benefits

Steps – How to create automatic star rating widget 

  • Open Blogger Dashboard
  • Next you can click on your Themes option and then the Three Dots option and then the "Edit html" option.
  • Next, when you click on the "Ctrl + F" option on your laptop keyboard, a search bar will open.
  • Then , Paste the CSS code given above this ]]></b:skin> tag.
/* Article or Product Rating */

.articleRating{position:relative;display:block;max-width:400px;margin:50px 0 30px 0;padding:15px;border:1px solid #767676;font-size:14px;line-height:1.8em;border-radius:10px} .articleRating b{position:absolute;font-size:13px;font-weight:400;margin:0;padding:2px 14px;background-color:#fffdfc;color:inherit;border:1px solid #767676;border-radius:15px;top:-15.5px;left:20px} .articleRating p{margin:15px 0 0 0} .drkM .articleRating b, .darkMode .articleRating b{background-color:#1e1e1e} .drkM .articleRating, .drkM .articleRating b, .darkMode .articleRating, .darkMode .articleRating b{border-color:#989b9f}
  • Next, find this comment:"<!--[ Post body ]-->" and paste the html code given below just after this: "<data:post.body/>".
<b:if cond='data:view.isPost and data:post.labels none (label =&gt; label.name in [&quot;Sponsored&quot; , &quot;Advertorial&quot;])'><!--[ Article or Product Rating ]--><div class='articleRating'><b:if cond='data:post.labels none (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])'><b>Rate This Article</b></b:if><b:if cond='data:post.labels any (label =&gt; label.name in [&quot;Product&quot; , &quot;Label_1&quot;])'><b>Rate This Product</b></b:if><p id='wpac-rating'/></div></b:if>
  • Then paste the given javascript code above <!--[ </body> close ]-->
<b:if cond='data:view.isPost'>

  <script>/*<![CDATA[*/ /* Star Rating Widget Script by The Taluat  (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:33453}),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>
  • Don't Forget Saving Your Theme

Note: ID 33453 change this part by signing up at Widget Pack .Once your account gets verified you will get your own ID.By Doing So , you'll be able to have control over these ratings.

Conclusion

So today we have discussed about How To Add Automatic Star Rating Widget For Blogger . I hope you like this post kindly do give a comment below. If you are having problem in implementing this kindly contact me. Do visit regularly for getting more updates like this.