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:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='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' fill='%23ffc53e'/%3E%3C/svg%3E") no-repeat}
i.icon-star.silver:before,i.icon-star.silver:before{content:'';width:17px;height:17px;display:inline-block;margin:-2px;transition:all .3s ease;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='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' fill='%23a9acad'/%3E%3C/svg%3E") 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: 'Rating', id: 30936});
(function() {
if ('WIDGETPACK_LOADED' in window) return;
WIDGETPACK_LOADED = true;
var mc = document.createElement('script');
mc.type = 'text/javascript';
mc.async = true;
mc.src = 'https://cdn.widgetpack.com/widget.js';
var s = document.getElementsByTagName('script')[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>
2 comments