Unfortunately, Google's Blogger service does not currently offer a star rating widget option. Star rating widgets are available by default on blog platforms like WordPress. Therefore, in order to integrate rating widgets on Blogger, we must make use of third-party widgets.
How To Create Star Rating Widget in Blogger:-
Step 1:- First Go To Blogger.Com.
Step 2:- Then log in to Your Blogger Account.
Step 3:- Then Click on Theme Menu.
Step 4:- After clicking on Edit Html.
Step 5:- Then Copy The Given Css Code and Put it Above The
</head>.<style type='text/css'>
/* Post Star Rating Widget By Www.SmartTechMukesh.Com */
#wpac-rating:before{content:"Rate This Article";top:-15px;text-align:center;position:relative;width:100%;}
#wpac-rating .wp-stars .wp-star:hover:before{z-index:999;padding:3px 11px;background:#1a1d23f0;color:#fff;font-size:12px;border-radius:2px;white-space:nowrap;position:absolute;line-height:1.4;text-align:center;-ms-transform:translateX(-30%);-moz-transform:translateX(-30%);-webkit-transform:translateX(-30%);transform:translateX(-30%);top:100%;margin-top:9px;}
</style>Step 6:- Then Copy the Below Html Code and Put it Under
<data:post.body/>.<div id="wpac-rating"></div>Step 7:- Then Copy The Given JavaScript Code and Put it Above The
</body>.<script type="text/javascript">
wpac_init = window.wpac_init || [];
wpac_init.push({widget: 'Rating', id: 31970});
(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://embed.widgetpack.com/widget.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(mc, s.nextSibling);
})();
</script>Step 8:- Then Don't Forget to Click on Save Theme.
Reference :
Www.SmartTechMukesh.Com