How to Make Rating Widget In Posts For Blogger

Hello Guys and welcome to Wolv Themes Our Tutorial today is about How To Make Rating Widget.

What is The Rating Widget ?

 Rating Widget is a widget which helps your visitors to rate your articles and helps you to know what your visitors feel about your articles.

Benefits :-

  • Helps Visitors to rate your posts
  • Help you know what the visitors feel about your post
Let's Start

How to Make Rating Widget In Posts :-

Step 1 :- Go to Blogger's dashboard and click theme.
Step 2 :- Click the arrow down icon next to the 'customize' button.
Step 3 :- Click Edit Html.
Step 4 :-Click on any word then Press CTRL+ F and type in the search form ]]></b:skin>.
Step 5 :- Copy the provided below code and paste it just above ]]></b:skin>
    /* Star Rating Css by Wolv Themes */
.starRating{border:1px solid #eceff1;border-radius:5px;padding:10px;height:60px;}
.starRating .p{background:#fefefe; padding-left:5px;width:160px; border:1px solid #eceff1;border-radius:10px;
position: relative; top:20px;margin-top:-45px;text-transform: uppercase;}     .darkMode .starRating .p{background:#232323;}    
/* Product Rating */ .rating-produk i.icon-star-angka{font-weight:400;font-size:12px;margin-left:5px;vertical-align:1px} .rating-produk{padding:0;width:55%;float:left;box-sizing:border-box;margin-top:10px} b.widget-rating{display:block;margin-bottom:10px} i.icon-star,.icon-star{font-weight:400;font-style:normal;display:inline-block} i.icon-star:before,.icon-star:before{content:&#39;&#39;;width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z&#39; fill=&#39;%23ffc53e&#39;/%3E%3C/svg%3E&quot;) no-repeat} i.icon-star.silver:before,i.icon-star.silver:before{content:&#39;&#39;;width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url(&quot;data:image/svg+xml,%3Csvg viewBox=&#39;0 0 24 24&#39; xmlns=&#39;http://www.w3.org/2000/svg&#39;%3E%3Cpath d=&#39;M12,17.27L18.18,21L16.54,13.97L22,9.24L14.81,8.62L12,2L9.19,8.62L2,9.24L7.45,13.97L5.82,21L12,17.27Z&#39; fill=&#39;%23a9acad&#39;/%3E%3C/svg%3E&quot;) no-repeat}
Step 6 :-Click on any word then Press CTRL+ F and type in the search form </body>.
Step 7 :- Copy the provided below code and paste it just above </body>.
<script type='text/javascript'>
wpac_init = window.wpac_init || [];
wpac_init.push({widget: &#39;Rating&#39;, id: 30936});
(function() {    
if (&#39;WIDGETPACK_LOADED&#39; in window) return;    
WIDGETPACK_LOADED = true;    
var mc = document.createElement(&#39;script&#39;);    
mc.type = &#39;
text/javascript&#39;;    
mc.async = true;    
mc.src = &#39;
https://cdn.widgetpack.com/widget.js&#39;;    
var s = document.getElementsByTagName(&#39;script&#39;)[0]; s.parentNode.insertBefore(mc, s.nextSibling); })();      
</script>
Step 8 :- Paste The Following Code in the last of any post or page you want.
<div class="starRating"> 
<p class="p">Rate Article:</p>
<p id="wpac-rating"></p>

Rate this article

Frontend Developer and UX Designer

2 comments

  1. What is use of product rating in the css?
    1. To rate allow the users to rate your product