Skip to main content

follow us

Add 5 Star Rating to Blogger Popular Post Widget

When it comes to becoming successful in online marketing and blogging there are certain things to consider. One these is writing a catchy and attractive post title. In the art of publishing the title of a book is the main selling point of it in the market. A book with a unique and catchy title attract readers and more sale, the same applies to the online world of blogging and Internet marketing. But sometimes it might be so hard deciding a catchy and optimized title for a post, so we need the help of some these catchy blog post title generator

Star rating system is commonly used on WordPress, mostly on product review site and e-commerce stores to rate products by just implementing some WordPress plugins. Blogger doesn't use plugins so is unavailable on blogger but we can add 5 star rating widget to blogger by adjusting some html codes. Star rating widgets are used on WordPress to rate products and services but today we are going to add five star rating to blogger popular post widget to rate post according to their popularity.

Why should I add star rating to popular post?

Reduce Bounce Rate and Increase CTR

Popular post widget on blogger is one of the must have widget to increase blog traffic, user engagement and reduce bounce rate on a blogger blog. Adding a star rating system that rate post according to how many views they have will make it more attractive and make visitors click.

Premium and Professional Look 

Five star rating on blogspot popular posts widget is a plus feature to spice up your blog design to make it look more professional. You are also a step closer to having a WordPress like premium theme on blogger.

Fast Loading Website

Adding an awesome star rating widget for blogspot won't cost your blog any harm as this widget is made purely from fontawesome icons which makes it to be very fast loading. Let get to how to add 5 star rating to blogger popular post widget.

How to Add Star Rating to Blogger Popular Post

The star rating on popular post widget rate the most popular post with 5 star and the next post with one less, up to the last post.

Adding Popular Post Widgets

Before we add star rating in Popular post widget we must add popular post widget on your blogger blog first. If you have it on your site already, then skip this step but if you don't just follow the below tutorial;

Step #1: Log in to your Blogger Dashboard

Step #2: Go to the Layout Tab.

Step #3: On the Sidebars, Click on "Add a Gadget" and select Popular Posts from the Gadget list.

Step #4: Now in configuration window Mark image thumbnail and unmark Snippet, also set posts to Display to 10.

Step #5: Now finally click the Save button.

Now you have successfully added popular post widget for blogger blog.

Adding Font Awesome

As I have said before, the star rating system was created using star icons from Fontawesome  because blogger does not support star rating. So now we must add fontawesome script to make this rating system work perfectly. If you already have fontawesome file on your blogger html codes then skip this step, but if you don't kindly follow the below step by step tutorial on how to add fontawesome in blogger blogs.

Step #1: Log in to your Blogger Dashboard

Step #2: Click on Template -> Edit HTML

Step #3: Now press Ctrl+F to open the search box and find <head>

Step #4: Paste the below Font Awesome code just Below/after <head> tag
<link href="//" rel="stylesheet" type="text/css"></link>

Step #5: Now click Save Theme

Adding Star Rating to Blogger 

Now follow the step by step guide on how to add five star rating system to google blogspot popular post widget.

Step #1: Login to your blogger dashboard
Step #2: Go-to Templates>> Edit Html
Step #3: Now search for the ]]></b:skin> and paste the below css codes above/before it.
.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}.PopularPostl 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}

- To change the color of the star rating, Change #F29B10 to your desired color.

Step #4: Now Click Save Theme and see star rating showing live on your popular post widget.


Star rating on blogger popular post widget add more beauty to your site and makes it look more professional. I hope you have successfully added star rating to blogspot popular post? If you encounter any problem adding this, kindly notify me through the comment section. Don't forget to keep sharing...

You Might Also Like:

Comment Policy: Please write your comments in accordance with the topic of this page post. Comments that contain links will not show up before they are approved
Open Comment