How to Add the Star Rating to Blogger Popular Posts
Table of Contents
What is Five Star Rating System Widget?
Advantages Of Adding Star Rating Widget to Popular Posts
- 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
Before we start the tutorial, you check the widget live on this link:
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 http://www.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.
We love to hear from you 😊💗.
🔔 Subscribe to our channel to get Exclusive & free tech tips & hacks 🔔
The steps are so easy for adding Rating Star gadget into blogger 🙂 (y)