Loading..
How to Add Star Rating Widget in Blogger Post

Hello friends! Today in this article we are going to talk about How to Add Star Rating Widget in Blogger Post. We will know all the How to Add Star Rating Widget in Blogger Post. So stay with this article to know in more detail.


Adding a star rating widget to a blog post on your blog makes your blog post look quite good. Now let's talk about how to add this star rating widget to your blogger blog. Below are some steps that you can easily follow to get a star rating in your Blogger blog post. Now that they know how to add a star rating to a blogger blog post, we also know some of its benefits.

Why we need to add Star Rating in Blogger Post

$ads={2}

The following are the benefits of adding a star rating widget to a blog post.
  • Increases your visitor's confidence in your product.
  • Using this widget you are usually given a rating of 1 to 5 stars. So that the user can give a review about your product.
  • It will increase the traffic to your site and also provide the value to your client.

How to Add Star Rating Widget in Blogger Post (Step by Step)

As we know in WordPress we can very easily add star rating to WordPress post using plugins. But we have a bit of difficulty because we don't have any plugin installed. The problem here is that we can't use any plugins in Blogger, but without using them we can add some scripts and add star rating to the blog post.

$ads={2}

Before you know the steps to add WhatsApp share button, we would recommend you to make a backup of your Blog template, because if anything goes wrong then you have save your blog design safely.
  • Login to your Blogger.com dashboard
  • Click on Theme Section and then click on the Customize arrow
  • Now click on Edit HTML
  • Now click on the code section and press Ctrl+F, you will see a search bar on the display screen.
  • Copy the below code
  • Search for </head>, Paste the code above to this </head> code

  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
(function(d, t, e, m){
window.RW_Async_Init = function(){
RW.init({
huid: "149369",
uid: "c21d872a654e0a635442e1377029f7ea",
options: { "style": "oxygen" } 
});
RW.render();
};
var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
l = d.location, ck = "Y" + t.getFullYear() + 
"M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
f = (-1 < l.search.indexOf('DBG=') ? '' : '.min'),
a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
if (d.getElementById(id)) return; 
rw = d.createElement(e);
rw.id = id; rw.async = true; rw.type = "text/javascript";
rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
s.parentNode.insertBefore(rw, s);
}(document, new Date(), "script", "rating-widget.com/"));

//]]>
</script>
<script type='text/javascript'>//<![CDATA[

$(document).ready(function() {
var dimension = 250;
$('#related-posts').find('img').each(function(n, image){
var image = $(image);
image.attr({src : image.attr('src').replace(/s\B\d{2,4}/,'s' + dimension)});
image.attr('width',dimension);
image.attr('height',dimension);
});
});
//]]></script>
  < /textarea>< /form>
  

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";">3- Now, search <b><data: post.body /></b> and
below it, add the following code:<o:p></o:p></span></p>

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";"><o:p> </o:p></span></p>

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";">If your template has more than one code of this type,
try them all until Eden is on<o:p></o:p></span></p>

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";"><o:p> </o:p></span></p>

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";"><span style="mso-spacerun: yes;"> </span>4 - Save your changes</span></p></div>

  • Now again press Ctrl+F and search for <data:post.body/> and copy the below code.
  • Paste this code just below to the <data:post.body/> code.
$ads={2}
<style>
.rw-ui-container.rw-dir-ltr .rw-report-link, .rw-ui-container.rw-valign-middle.rw-halign-right .rw-report-link {
display: none!important;
}
.rw-ui-info-inner-container:hover {
background: none!important;
}
.rw-ui-info-nub.rw-ui-info-inner-nub, .rw-ui-info-nub.rw-ui-info-outer-nub {
display: none;
}
.rw-ui-tooltip {
display: none!important;
}
.rw-ui-container.rw-size-small span.rw-ui-info {
font-family: Open Sans, Arial, sans-serif;
color: #b8b8b8!important;
text-transform: uppercase;
font-size: 13px;
display: none;
}
.taqyem {
width: 200px;
margin: 5px auto;
padding: 5px;
background-color: #4d90fe;
height: 57px;
text-align: center;
border-radius: 4px;
}
.taqyem h3 {
padding-bottom: 5px;
border-bottom: #1071AD 1px solid;
}
.rw-ui-container {
float: right;
margin-top: 5px;
}
.rw-ui-container.rw-halign-right, .rw-ui-container.rw-halign-right .rw-ui-info-inner-container {
border-color: #fff!important;
}
.rw-ui-report.rw-size-large.rw-halign-center.gradient.rw-dir-ltr.rw-type-nero.rw-meta-rating-29085119.rw-valign-bottom, .rw-ui-report.rw-dir-ltr, .rw-ui-container.rw-size-medium .rw-report-link {
display: none!important;
}
</style>
<div class='taqyem'>
<h3>
Your evaluation of the topic?</h3>
<div class='rw-ui-container taqstars'/>
</div>
  < /textarea>< /form>


<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14.0pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";">If your template has more than one code of this type,
try them all until Eden is on<o:p></o:p></span></p>

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14.0pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";"><o:p> </o:p></span></p>

<p class="MsoNormal" style="line-height: 150%; text-align: justify;"><span style="font-family: Ebrima; font-size: 14.0pt; line-height: 150%; mso-bidi-font-family: "Jameel Noori Nastaleeq";"><span style="mso-spacerun: yes;"> </span>4 - Save your
changes and you're done<o:p></o:p></span></p><span style="font-family: Ebrima; font-size: 18.6667px; text-align: justify;"></span></form></div>

Note: If the code <data:post.body/> is present two or more than two time in your blog, then paste this HTML code in second one.

$ads={2}
  • Now click on Save theme icon.
  • I hope you guys enjoyed the Star Rating Widget in your Blogger Posts. Now enjoy this Star Rating Widget in your Blogger Posts.

Conclusion:

The purpose of today post is to provide you with the How to Add Star Rating Widget in Blogger Post. Did you like these How to Add Star Rating Widget in Blogger Post? You must definitely give us your feedback in the comment box below. If you also want to give us any kind of Suggestion, then share your opinion with us in the Comment Box.

Thank You!
close