How to Add the Star Rating Widget to Website Posts How to Add the Star Rating Widget to Website Posts | RaQMedia | Complexity Simplified

How to Add the Star Rating Widget to Website Posts

SHARE:

You May Also Like


better index your site on search engine and the overall SEO with WordPress plugins

What is Blogger Star Ratings Widget?


The voting system is mainly a Wordpress feature. In short, the star widget is that bottom voting option available in most of websites. This widget as we have seen before with Adding Star Rating Widget to Popular Posts. displays a stylish rating choice at the end of your blog posts or articles.

Our post will help you answer these main questions that irritate many bloggers.
  • How do I add a star rating to my website?
  • How do I add a rating widget on Blogger?
  • How do I add a star rating in Wordpress?
  • How do I add a new widget?

Benefits Of Adding Star Rating to WordPress or Blogger Posts


If you decide to make use of the widget, your blog will benefit from a bunch of advantages that most bloggers and webmasters are seeking. Here are some of them:

  1.  The widget serves as a good analytics feedback on your blog posts.
  2. Gives a stylish, beautiful, personalized and WordPress-like look for your Blogspot or 
  3. Easy to install in WordPress website with plugins and get analytics.
  4. Increases sole of your visitors' confidence on the site as it asks its readers for their impression on the offered content.
  5. Helps search engines such as Google to index your posts and add a rating stars ⭐⭐⭐⭐⭐.
  6. The rating is useful to know how satisfied your audience are about your content.

Popular Post Widget with Star Rating for Blogger


You can preview the Blogger widget from the link below:



Step 01: Prepare Your Template

First, follow these steps to get your template ready for the widget installation:
  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 <head/> line and paste the following CSS code just above that <head/>.

[ /*Star Rating in blogger by http://www.raqmedia.com/ */ <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js'type='text/javascript'/><script type='text/javascript'>(function(d,t,e,m){window.RW_Async_Init=function(){RW.init({huid:"149369",uid:"c21d872a654e0a635442e1377029f7ea",options:{"style":"oxygen"}});RW.render();};var rw,s=d.getElementsByTagName(e)[0],id="rw-js",l=d.location,ck="Y"+t.getFullYear()+"M"+t.getMonth()+"D"+t.getDate(),p=l.protocol,f=(-1<l.search.indexOf('DBG=')?'':'.min'),a=("https:"==p?"secure."+m+"js/":"js."+m);if(d.getElementById(id))return;rw=d.createElement(e);rw.id=id;rw.async=true;rw.type="text/javascript";rw.src=p+"//"+a+"external"+f+".js?ck="+ck;s.parentNode.insertBefore(rw,s);}(document,new Date(),"script","rating-widget.com/"));</script><script type='text/javascript'>$(document).ready(function(){var dimension=250;$('#related-posts').find('img').each(function(n,image){var image=$(image);image.attr({src:image.attr('src').replace(/s\B\d{2,4}/,'s'+dimension)});image.attr('width',dimension);image.attr('height',dimension);});});]


Step 03: Paste the CSS Code

Now, search <data:post.body/> line and paste the following CSS code just after that <data:post.body/>.
[<style>.rw-ui-container.rw-dir-ltr.rw-report-link,.rw-ui-container.rw-valign-middle.rw-halign-right.rw-report-link{display:none!important;}.rw-ui-info-inner-container:hover{background:none!important;}.rw-ui-info-nub.rw-ui-info-inner-nub,.rw-ui-info-nub.rw-ui-info-outer-nub{display:none;}.rw-ui-tooltip{display:none!important;}.rw-ui-container.rw-size-small span.rw-ui-info{font-family:Lato;color:#b8b8b8!important;text-transform:uppercase;font-size:13px;display:none;}.taqyem{width:200px;margin:5px auto;padding:5px;background-color:#ff9534;height:57px;text-align:center;border-radius:4px;}.taqyem h3{padding-bottom:5px;border-bottom:#1071AD 1px solid;}.rw-ui-container{margin-top:-30px;}.rw-ui-container.rw-halign-right,.rw-ui-container.rw-halign-right.rw-ui-info-inner-container{border-color:#fff!important;}.rw-ui-report.rw-size-large.rw-halign-center.gradient.rw-dir-ltr.rw-type-nero.rw-meta-rating-29085119.rw-valign-bottom,.rw-ui-report.rw-dir-ltr,.rw-ui-container.rw-size-medium.rw-report-link{display:none!important;}</style><div class='taqyem'><h3>Rate The Post</h3><div class='rw-ui-container taqstars'/></div>]

Important Notice For Blogger Users

 Note: The Star Rating widget script may not work for all the blogger templates. You may need to add the Font Awesome script.

How to Add the Star Rating Widget to WordPress Posts


Raqmedia has reviewed some of the most popular star rating free plugins. Here are the free and popular plugins that we recommend for WordPress themes:



🔔 Subscribe to our channel to get exclusive & free tech tips & hacks 🔔

Voila! This way you have successfully added a modern and stylish star rating or review system to Blogger or WordPress posts. If you face any problems or find ways to improve this script or better WordPress Plugins, do share your thoughts and feedback.

We love to hear from you 😊💗.

COMMENTS

SHARE YOUR THOUGHTS: 2
  1. The most popular Five Star Review System on the web. User-friendly ratings for: posts, pages, comments, WooCommerce, BuddyPress and bbPress forums

    ReplyDelete
  2. The Star Rating widget allows you to display beautiful and personalized CSS star ratings within your WordPress website in just a few clicks. 😊

    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,31,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,7,Writing,1,YouTube,24,شروحات تقنية,16,
ltr
item
RaQMedia | Complexity Simplified: How to Add the Star Rating Widget to Website Posts
How to Add the Star Rating Widget to Website Posts
Add a star rating widget to website end of post easily. Installing Star Rating to WordPress or Blogger Posts help better index your site on search engine and the overall SEO with WordPress plugins.
https://1.bp.blogspot.com/-VMsak0wirGA/XzKX_AGV7JI/AAAAAAAAI5c/5gNvX0MccpQBw2KDYGDew5Q38jiWLWklwCLcBGAsYHQ/s320/how-to-add-star-rating-widget.webp
https://1.bp.blogspot.com/-VMsak0wirGA/XzKX_AGV7JI/AAAAAAAAI5c/5gNvX0MccpQBw2KDYGDew5Q38jiWLWklwCLcBGAsYHQ/s72-c/how-to-add-star-rating-widget.webp
RaQMedia | Complexity Simplified
https://www.raqmedia.com/2020/08/how-to-add-star-rating-widget.html
https://www.raqmedia.com/
https://www.raqmedia.com/
https://www.raqmedia.com/2020/08/how-to-add-star-rating-widget.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