How to Add the Star Rating to Blogger Popular Posts How to Add the Star Rating to Blogger Popular Posts | RaQMedia | Complexity Simplified

How to Add the Star Rating to Blogger Popular Posts

SHARE:

You May Also Like


اضافة-تقييم-نجوم-لمشاركات-الشائعة



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

  1. It adds a professional impression for your website.
  2. It Attracts readers to visit these posts- especially if they are highly rated i.e four or more .
  3. 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:


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:
  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 ]]></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.
🔔 Subscribe to our channel to get exclusive & free tech tips & hacks 🔔

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

COMMENTS

SHARE YOUR THOUGHTS: 1
  1. The steps are so easy for adding Rating Star gadget into blogger :) (y)

    ReplyDelete
Thank you for taking time to comment. 😊 💙

🔔 If you're interested in more, have questions, or any constructive criticism, let us know in the comment section below!

⚠ Your email address will not be published. By using this form you agree with the storage and handling of your data by this website.

Name

Android,13,Android Apps,1,Apps,2,Around-The-World,14,Articles,11,Autos,4,Blogger,15,Blogging,30,Celebrities,9,Classroom-Ideas,3,Dictionaries,1,DIY,57,Earn-Money,10,English-Club,1,English-Exercises-Online,1,Entertainment,48,ESL-Games,6,Facebook,11,Freebies,5,Fun,21,Girls-stuff,41,Grammar,7,Health,35,Imaniat,66,Kids,44,Learn-Arabic,20,Learn-English,68,Lifestyle,138,Listening,1,Methodology,13,Motivation,9,Mysteries,14,News,32,Online-Tools,4,Personality,2,Photoshop,8,Printables,25,Pronunciation,3,Qasas-ul-Anbiya,23,Qasas-ul-Quran,7,Quizzes,8,Rawae,18,Realities,17,Reviews,13,SEO,8,Services,3,Sira,24,Stories,1,Students-Corner,4,Teach-English,23,Tests,7,Travel,14,Tutorials,92,Vocabulary,40,Windows,4,Women,41,WordPress,6,Writing,1,YouTube,24,شروحات تقنية,16,
ltr
item
RaQMedia | Complexity Simplified: How to Add the Star Rating to Blogger Popular Posts
How to Add the Star Rating to Blogger Popular Posts
Follow our guide to install a stylish five star rating system to popular posts. This blogger widget will show rating stars with easy use and customisation. You can choose from various themes.
https://1.bp.blogspot.com/-tgm6m9CjGkw/XzCMhWoAqoI/AAAAAAAAI5M/KT8FalDhYYUL8dlX4QK27qY38qHIP4rHQCLcBGAsYHQ/s320/how-to-add-star-rating-to-blogger-popular-posts.webp
https://1.bp.blogspot.com/-tgm6m9CjGkw/XzCMhWoAqoI/AAAAAAAAI5M/KT8FalDhYYUL8dlX4QK27qY38qHIP4rHQCLcBGAsYHQ/s72-c/how-to-add-star-rating-to-blogger-popular-posts.webp
RaQMedia | Complexity Simplified
https://www.raqmedia.com/2020/08/add-star-rating-to-blogger-popular-posts.html
https://www.raqmedia.com/
https://www.raqmedia.com/
https://www.raqmedia.com/2020/08/add-star-rating-to-blogger-popular-posts.html
true
5573019325017529632
UTF-8
Loaded All Posts No posts are found VIEW ALL Read more Reply Cancel reply Delete By Home PAGES POSTS View All You May Also Like - قد يعجبك أيضا LABEL ARCHIVE SEARCH ALL POSTS Sorry! No posts were found matching your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Click Here To Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy Table of Contents