Up next in 10
How to Add a Star Rating Widget in Blogger _ 5 Star Rating Schema _
3K views
Jan 26, 2024
In this instructional video, viewers will learn how to enhance their Blogger blog by incorporating a star rating widget. The tutorial covers two methods: one utilizing a third-party service called RatingWidget, offering customizable star rating designs, and the other leveraging Google's Rich Snippets to enable star ratings in search results. Whether users prefer a visually appealing widget from RatingWidget or opt for the SEO benefits of schema markup, the video provides step-by-step guidance on implementing these features to elevate the overall user experience on their Blogger platform.
View Video Transcript
0:00
Hello everyone, welcome to Ketublogging and in this video I will show you how you can add a star rating wizard
0:05
wizard like this to your blogger website. So for this we are going to use a free website called wizard pack
0:11
So just search for wizard pack in Google and you will see a result like this
0:18
So just click on the first result and then here you have to create a free account
0:24
So this website lets us create a free star rating wizard for our website
0:29
So, here you just need to enter your website URL and your email address and create a free account
0:36
So let me just sign into this website. Okay, now here I will click on menu and I will search for rating
0:43
So just click on here, rating and click on install. Now just change some setting here, so just click on setting and here you can enable Google
0:55
Re-S snippet for rating. So this is the rating schema. So you can use the rating schema in your blog post and then click on vote by social
1:05
So I can use device cookies and I can change the star rating color to something like blue
1:15
Now click on save settings. Okay, now click on menu and under the rating click on install
1:24
Now you have to copy the code from here. And then go to your blogger dashboard and click on theme section
1:34
And before adding the code, make sure to take a backup of your theme and then proceed the
1:38
next step. Click on Edit HTML. Now you have to add this code to each of the blog post
1:46
So for this you have to find this code, data post body
1:51
So just copy this code and here click on Control Plus app and type the code and hit Enter So it will so one time or multiple time So you have to find the last one
2:06
So let me just click on here and as you can see this is the Data View single items and this
2:12
is the Data Post body. So I have to insert the code just after this code
2:17
So just create a space here and you have to add that copied code
2:22
So let me just copy this again and I will add this code like this
2:30
So I can remove this last anchor tag here and let me just click on enter and I have to add
2:39
a deep class just before the rating deep class. So let me just copy the deep class from here
2:52
And I will add it just before the rating deep class and I will close this deep class like this
3:04
Now let me just click on save here. Okay, now the code is saved, let me just go to the blog post and click on refresh
3:16
Now scroll down and as you can see the star rating wizard is looks like this and when I click
3:22
When I click on this star rating it will show a count and it will show one vote
3:28
So we can further design this by using that deep class. So you have added a dip with a class rating wizard
3:37
So we can style this by just copy the style element from here and I will go to the theme editor
3:46
and I will scroll down to the closing body tag and I can paste this CSS code Or you can directly press the CSS code in the CSS area So let me just scroll off So this is the CSS section
4:02
So let me just add the CSS code here. So I can remove the style tag from here
4:13
And here you have to add your dark mode class. So let me just change the dark mode class of this theme and let me just click on safe
4:21
So, if you are using this CSS code just before the closing body tag, then use the style
4:27
tag or if you are using the CSS code in the CSS area, then you don't need to add the
4:33
style tag. Okay, now let me just go to the front and let me just refresh this page
4:44
And as you can see, the star rating wizard will look like this
4:48
So let me just open this blog post. in a incognito mode and let's click Enter
5:00
Now scroll down and here I can vote it again and as you can see there is two votes
5:10
So here the device cookies is used to add the voting but if you don't want to use device
5:17
cookies then you can modify it from here. So just go to the rating and click on setting and instead of vote by a device you can use
5:27
the social button. So let's click on save. Now let me just go to the blog post and click on
5:34
refresh. Now if I want to vote it again, it will ask you to log in through your social
5:42
media account So in this way you can prevent invalid votes in your website and only vote count if the user is log into the social account So I hope you got the idea how to add a rating wizard in your blogger website So now let check if the rating schema is added in this blog post or not
6:04
So for this I will copy the URL from here and I will search for REACH Result Test tool
6:12
So just search for this and click on the first result, Reach Result Test
6:17
Now enter your URL here and click on the Reyes result test. on Enter
6:23
So just click on test URL. So it will take some time to test the URL
6:29
So let's wait. Now scroll down and search for review snippet. So just click on it
6:35
And as you can see the review snippet schema is added in this blog post
6:40
And let me just check the preview render here. So I will click on view test page and I can see this screenshot here
6:49
So in this way you can add a valid review snippet schema in your blog post and show a option to
6:58
board your blog post and it will show a star rating in search result also
7:04
So let me just show you how it looks in search results
7:08
So I can search for like rank math. Star rating. So it will show a rating like this in the search result page and here it will show the
7:31
rating and total vote count. So in this way you can add a star rating wizard to your blogger website and add the star rating
7:41
schema in the blog post. And if you have any doubt regarding this, then you can ask me in the comment section and
7:49
If you found this content helpful, then make sure to hit the like button
7:53
Thank you
#Skins
# Themes & Wallpapers