How to Add the Star Rating to Blogger Popular Posts

1 1,187 5 minutes read

Table of Contents

What is Five Star Rating System Widget?

The five stars rating system is the star widget that you see on most of eCommerce website or online stores where you can rate the product or the service offered in that business.The widget that we offer displays a stylish rating choice on the sidebar of your blog.

Advantages Of Adding Star Rating Widget to Popular Posts

Making use of the mentioned feature has several advantages that most Bloggers seek. Here are some

It adds a professional impression for your website.
It Attracts readers to visit these posts- especially if they are highly rated i.e four or more .
Retains your visitors for longer time. Consequently this will decrease your bounce rate and rank you higher in search engines.

Popular Post Widget with Star Rating for Blogger

As most of us know that the star rating feature has been introduced many years ago on the WordPress Platform. That system kept on inspiring bloggers to implement it into the Google's Blogspot Blogging platform. However; it is not supported till the moment of publishing this post. The code will not allow your visitors to rate the posts as it is already predefined by the admin. If you want to allow readers to vote for the posts, just add this code from the link below:

In today's post, we have brought you an easy way to implement this feature using CSS code. It is very similar to WordPress rating Plugins. The stars will be displayed by making use of Font Awesome script. You can have an idea on this great icons font supplier from the following link:

Font Awesome Icons

Before we start the tutorial, you check the widget live on this link:

Widget Preview

Step 01: Prepare Your Template

First, follow these steps to get your template ready:

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 ]]></b:skin> line and paste the following CSS code just above that ]]></b:skin>.

Step 03: Select Your Widget:

Here are two possible stylish rating system. Select just one to use and paste it on the appropriate place on your template's HTML.

Theme 1: Yellow Stars Rating Widget

/* Popular Post with Yellow Star Rating by https://raqmedia.com/ */.PopularPosts ul {
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 5px 5px 0;
	overflow: hidden;
	border-top: none;
}

.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
	background: none;
	outline: none;
}

.PopularPosts ul {
	margin: 0;
	list-style: none;
	color: #64707a;
}

.PopularPosts ul li img {
	background: #fafafa;
	display: block;
	margin: 0 10px 0 0;
	width: 60px;
	height: 60px;
	overflow: hidden;
	float: left;
}

.PopularPosts ul li {
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: .7em 0!important;
	border: 0;
	position: relative;
	border-bottom: 1px solid #F1F1F1;
}

.PopularPosts ul li:before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f005';
	display: inline-block;
	position: absolute;
	color: #F29B10;
	text-align: center;
	bottom: 0;
	right: 0;
	margin: 9px 0;
	font-size: 11px;
	padding: 0;
	font-weight: normal;
	line-height: normal;
	transition: all .3s;
}

.PopularPosts ul li:nth-child(1):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f005';
}

.PopularPosts ul li:nth-child(2):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f123';
	opacity: .9;
}

.PopularPosts ul li:nth-child(3):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f006';
	opacity: .85;
}

.PopularPosts ul li:nth-child(4):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f123\f006';
	opacity: .8;
}

.PopularPosts ul li:nth-child(5):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f006\f006';
	opacity: .75;
}

.PopularPosts ul li:nth-child(6):before {
	font-family: fontawesome;
	content: '\f005\f005\f123\f006\f006';
	opacity: .7;
}

.PopularPosts ul li:nth-child(7):before {
	font-family: fontawesome;
	content: '\f005\f005\f006\f006\f006';
	opacity: .75;
}

.PopularPosts ul li:nth-child(8):before {
	font-family: fontawesome;
	content: '\f005\f123\f006\f006\f006';
	opacity: .7;
}

.PopularPosts ul li:nth-child(9):before {
	font-family: fontawesome;
	content: '\f005\f006\f006\f006\f006';
	opacity: .75;
}

.PopularPosts ul li:nth-child(10):before {
	font-family: fontawesome;
	content: '\f123\f006\f006\f006\f006';
	opacity: .7;
}

.PopularPosts ul li:hover:before {
	opacity: 1;
}

.PopularPosts ul li:first-child {
	border-top: none;
}

.PopularPosts ul li:last-child {
	border-bottom: none;
}

.PopularPosts ul li .item-title a,.PopularPosts ul li a {
	color: #333;
	font-size: 13px;
}

.PopularPosts ul li a:hover {
	color: #2476e0;
}

.PopularPosts .item-thumbnail {
	margin: 0;
}

.PopularPosts .item-snippet {
	display: none;
}

.PopularPosts .item-title {
	font-weight: 700;
	padding-bottom: .2em;
	padding: 0 5px;
}

Theme 2: Blue Stars Rating Widget

/* Popular Post with Blue Star Rating by http://www.raqqmedia.com/ */.PopularPosts ul {
	background: #fff;
	list-style: none;
	margin: 0;
	padding: 5px 5px 0;
	overflow: hidden;
	border-top: none;
}

.PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img {
	margin: 0;
	padding: 0;
	list-style: none;
	border: none;
	background: none;
	outline: none;
}

.PopularPosts ul {
	margin: 0;
	list-style: none;
	color: #64707a;
}

.PopularPosts ul li img {
	background: #fafafa;
	display: block;
	margin: 0 10px 0 0;
	width: 60px;
	height: 60px;
	overflow: hidden;
	float: left;
}

.PopularPosts ul li {
	position: relative;
	background-color: #fff;
	margin: 0;
	padding: .7em 0!important;
	border: 0;
	position: relative;
	border-bottom: 1px solid #F1F1F1;
}

.PopularPosts ul li:before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f005';
	display: inline-block;
	position: absolute;
	color: #30AEE1;
	text-align: center;
	bottom: 0;
	right: 0;
	margin: 9px 0;
	font-size: 11px;
	padding: 0;
	font-weight: normal;
	line-height: normal;
	transition: all .3s;
}

.PopularPosts ul li:nth-child(1):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f005';
}

.PopularPosts ul li:nth-child(2):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f123';
	opacity: .9;
}

.PopularPosts ul li:nth-child(3):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f005\f006';
	opacity: .85;
}

.PopularPosts ul li:nth-child(4):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f123\f006';
	opacity: .8;
}

.PopularPosts ul li:nth-child(5):before {
	font-family: fontawesome;
	content: '\f005\f005\f005\f006\f006';
	opacity: .75;
}

.PopularPosts ul li:nth-child(6):before {
	font-family: fontawesome;
	content: '\f005\f005\f123\f006\f006';
	opacity: .7;
}

.PopularPosts ul li:nth-child(7):before {
	font-family: fontawesome;
	content: '\f005\f005\f006\f006\f006';
	opacity: .75;
}

.PopularPosts ul li:nth-child(8):before {
	font-family: fontawesome;
	content: '\f005\f123\f006\f006\f006';
	opacity: .7;
}

.PopularPosts ul li:nth-child(9):before {
	font-family: fontawesome;
	content: '\f005\f006\f006\f006\f006';
	opacity: .75;
}

.PopularPosts ul li:nth-child(10):before {
	font-family: fontawesome;
	content: '\f123\f006\f006\f006\f006';
	opacity: .7;
}

.PopularPosts ul li:hover:before {
	opacity: 1;
}

.PopularPosts ul li:first-child {
	border-top: none;
}

.PopularPosts ul li:last-child {
	border-bottom: none;
}

.PopularPosts ul li .item-title a,.PopularPosts ul li a {
	color: #333;
	font-size: 13px;
}

.PopularPosts ul li a:hover {
	color: #2476e0;
}

.PopularPosts .item-thumbnail {
	margin: 0;
}

.PopularPosts .item-snippet {
	display: none;
}

.PopularPosts .item-title {
	font-weight: 700;
	padding-bottom: .2em;
	padding: 0 5px;
}

Important Notice For Blogger Users

⚠ Note: The Star Rating widget script may not work for all the blogger templates. You may need to delete the old popular Posts code first or add the Font Awesome script.

And That's it! Voila! you have successfully added a stylish rating stars widget to Blogger Popular posts on the sidebar. If you face any problems or find ways to improve this script or better Blogger widgets, do share your thoughts and feedback.

We love to hear from you ????????.

How to Add the Star Rating to Blogger Popular Posts

What is Five Star Rating System Widget?

Advantages Of Adding Star Rating Widget to Popular Posts