How to add 5 star ratings in blogger posts? {Blog Feature}

How to add 5-star ratings in blogger posts? {Blog Feature}

For users, Adding a 5 Star Rating into their blog can be beneficial in many ways. It will also help your blog to grow by increments of user visits and other hand you will have feedback in form of these 5-star review ratings.

As a beginner blog writer or learner, one must add a 5-star rating widget or section into their blog post. This will give you scope to analyze your content reach and output of your content authentication. As well as enhance your rank on google search results by enabling your blog with  google review schema markup

Add CSS for Formatting 5-star ratings (Align to Centre)

Before implementing the 5 Star rating into your blogger website. You can add a small piece of CSS code to beautify your 5 Star rating by making it align to the center.

So here is the custom CSS for aligning the 5-star rating to the center of the post or page. you just need to copy the below-given CSS code and paste it into your blogger template custom CSS section.

  • Step 1: Log in to Blogger Dashboard.

  • Step 2: Go to Theme > Click on Customize Button > Edit HTML. find /style Or

  • Step 3: Go to Layout tab > Click on Theme Designer > Advanced > Add CSS.

5 Star Rating CSS

	#wpac-rating{text-align: center;position: relative;width: 100%;font-size:16px;font-weight:700;margin:10px 0;padding:10px 0 0;color:var(--ssd-primary);border-top:1px solid #eee}
#wpac-rating:before {content: "Please share your support by rate this article!";}

Custom Javascript for 5-star ratings

I read many articles regarding adding 5 Star ratings to blogger websites. But No one finds the open-source code for 5-star ratings nor me.

Still, I am continuously searching for the custom javascript code for 5 Star review ratings. Once I get that working code for this. I will definitely update this article with the solution. meanwhile, you can have a third-party website widget.

Code for Add 5 Star Ratings in Blogger Posts:

Today I will share with you a process that enables you to get the 5-star ratings in your blog by following some easy steps.

widgetpack is the best 5-star rating widget provider for now. I use many widgets and compare them. widget pack is faster than any other. as well it can be used without any error.

Code has errors. I am working on it. Meanwhile, you can bookmark this article. And visit again to have working code for adding 5 Star rating in blogger blog.

Steps to Implement the 5 Star Rating to the blogger post.

Note: I am working on this thread. This article will be updated soon.

  • Step 1: Go to the "Theme" Tab. (on dashboard) 
  • Step 2: Click on the "Down Arrow" Button. (Available on the right side of the "Customize" button.)  
  • Step 3: Choose "Edit HTML"
  • Step 4: Click anywhere at " XML code" and Press Short-cut Key CTRL+F to open the search box.
  • Step 5: Now find this "<data:post.body/>" code. And paste the 5 Star Review Ratings Code. 
  • Step 6: Now click on the " Save icon" (Visible on the right top corner) and check the page. 
Now you can refresh your blog to check it. It will have a 5 Star rating on each page with google review schema markup that can be checked on the  Google Schema Markup Check Tool.

It will show that each page of your blog has a Google 5 Star product review mark-up that functioning well.

I hope this article will be helpful for you. Please do share your valuable feedbacks in the comment section. You can also share this post to help others.

Next Post Previous Post
No Comment
Add Comment
comment url