Table of Contents
What is Blogger Star Ratings Widget?
The voting system is mainly a Wordpress feature. In short, the star widget is that bottom voting option available in most of websites. This widget as we have seen before with Adding Star Rating Widget to Popular Posts. displays a
stylish rating choice at the end of your blog posts or articles.
Our post will help you answer these main questions that irritate many bloggers.
Like the one below:
Our post will help you answer these main questions that irritate many bloggers.
- How do I add a star rating to my website?
- How do I add a rating widget on Blogger?
- How do I add a star rating in Wordpress?
- How do I add a new widget?
Benefits Of Adding Star Rating to WordPress or Blogger Posts
If you decide to make use of the widget, your blog will benefit from a bunch of advantages that most bloggers and webmasters are seeking. Here are some of them:
- The widget serves as a good analytics feedback on your blog posts.
- Gives a stylish, beautiful, personalized and WordPress-like look for your Blogspot or
- Easy to install in WordPress website with plugins and get analytics.
- Increases sole of your visitors' confidence on the site as it asks its readers for their impression on the offered content.
- Helps search engines such as Google to index your posts and add a rating stars ⭐⭐⭐⭐⭐.
- The rating is useful to know how satisfied your audience are about your content.
Popular Post Widget with Star Rating for Blogger
You can preview the Blogger widget from the link below:
Step 01: Prepare Your Template
First, follow these steps to get your template ready for the widget installation:- Login to you Blogger dashboard.
- Always backup your template before making any changes.
- Head to Template then edit HTML.
- With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
- Search for the line of code by hitting Ctrl+F
- Save your template and exit.;
Step 02: Locate The Code
Now, search <head/> line and paste the following CSS code just above that <head/>.
/*Star Rating in blogger by https://raqmedia.com/ */ < script src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'
type = 'text/javascript' / > < script type = 'text/javascript' > (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
'>$(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);});});</textarea> </div>
Step 03: Paste the CSS Code
Now, search <data:post.body/> line and paste the following CSS code just after that <data:post.body/>.<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: Lato;
color: #b8b8b8!important;
text-transform: uppercase;
font-size: 13px;
display: none;
}
.taqyem {
width: 200px;
margin: 5px auto;
padding: 5px;
background-color: #ff9534;
height: 57px;
text-align: center;
border-radius: 4px;
}
.taqyem h3 {
padding-bottom: 5px;
border-bottom: #1071AD 1px solid;
}
.rw-ui-container {
margin-top: -30px;
}
.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>Rate The Post</h3><div class='rw-ui-container taqstars'/></div>
Important Notice For Blogger Users
Note: The Star Rating widget script may not work for all the blogger templates. You may need to add the Font Awesome script.How to Add the Star Rating Widget to WordPress Posts
Raqmedia has reviewed some of the most popular star rating free plugins. Here are the free and popular plugins that we recommend for WordPress themes:
???? Subscribe to our channel to get exclusive & free tech tips & hacks ????
Voila! This way you have successfully added a modern and stylish star rating or review system to
Blogger or WordPress posts. If you face any problems or find ways to improve
this script
or better WordPress Plugins, do share your thoughts and feedback.
We love to hear from you ????????.
We love to hear from you ????????.
The most popular Five Star Review System on the web. User-friendly ratings for: posts, pages, comments, WooCommerce, BuddyPress and bbPress forums
The Star Rating widget allows you to display beautiful and personalized CSS star ratings within your WordPress website in just a few clicks. ????