BloggingBloggerWordPress

How to Add the Star Rating Widget to Website Posts

Share This Post, Help Others!

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.

Like the one below:


star-ratings-rich-snippetPin



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:

  1.  The widget serves as a good analytics feedback on your blog posts.
  2. Gives a stylish, beautiful, personalized and WordPress-like look for your Blogspot or 
  3. Easy to install in WordPress website with plugins and get analytics.
  4. Increases sole of your visitors' confidence on the site as it asks its readers for their impression on the offered content.
  5. Helps search engines such as Google to index your posts and add a rating stars ⭐⭐⭐⭐⭐.
  6. 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:
  1. Login to you Blogger dashboard.
  2. Always backup your template before making any changes.
  3. Head to Template then edit HTML.
  4. With Ctrl+C to copy and Ctrl+V to paste the following codes in their appropriate places.
  5.  Search for the line of code by hitting Ctrl+F
  6. 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 ????????.

Share This Post, Help Others!

Other Popular Articles ...

2 Comments

Leave a Reply

Back to top button
Ask ChatGPT
Set ChatGPT API key
Find your Secret API key in your ChatGPT User settings and paste it here to connect ChatGPT with your Tutor LMS website.
Sharing is caring

Ad Blocker Detected :(

Please consider supporting us by disabling your ad blocker.

من فضلك قم بتعطيل أداة مانع الإعلانات أدبلوك من المتصفح للدخول للموقع أو إستخدم متصفح آخر
شكرا لتفهمك وزيارتك