Add 5 Star Rating to Blogger Popular Post Widget - Fancybloggertricks

Add 5 Star Rating to Blogger Popular Post Widget

- 4:24:00 PM
Add 5 Star Rating to Popular Post Widget on Blogger
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.
How to add popular widget to blogger
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="//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" 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}

Customization:
- 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.

Conclusion

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... 

1 blogger:

avatar
This comment has been removed by the author.

We love comments but spam or irrelevant comment with lots of links will be removed immediately.
EmoticonEmoticon

 

Quick Help!

Having issues? Need quick fix? simply email me or call me

Learn more

Write For Us

Submit a guest post and see it get published real quick

Learn more

Advertise Here

Place relevant banners, links, and sponsored posts at affordable rate.

Learn more

NEWSLETTER SIGNUP

Start typing and press Enter to search