How to make a star rating accompanied with CSS

How to make a star rating accompanied with CSS - Making Css Accompanied Star Rating is an advanced post of the previous article entitled "How to Make Star Ratings In Blog".
Just to remind me if you have not read the important posts in the case of rich snipets, including:

Rich snipets
Differences in Html Format Rich snipets

I also want to remind that there are 2 types of rich star rating snipets ie aggregate rating and individual rating. In mounting the html code microdata to blog there are 2 ways: Installation manual in each post or automatically in order to appear in the entire post by blogger templates.

Here I will give you a touch of the form design css to display the rating on review blog looks interesting and rich properties snipets using standard rating of schema.org example, as shown below:

By Star Rating Standard Accompanied by Css Properties

Properties standard of what I mean here is not only the metadata format using the name, author, and rating only, but there are a few extras such as a description. Html code you can copy directly. Here I will inform the design rating for 2 types of aggregate rating and individual rating, the differences between them can you read in my previous post "How to Make Star Ratings In Blog"

individual Rating

Example 1 Individual rating view on the blog

Css code that you need to plug in the template.
First please find the code ]]> </ b: skin>
Then paste the code css Below, above ]]> </ b: skin>

.content-box-infoindong {
    border: 4px dashed rgb(204, 204, 204);
    margin: 5px;
    padding: 10px;
}
.content-box-infoindong:hover {
    background-color: rgb(241, 246, 249);
    border: 4px dashed rgb(31, 168, 245);
    margin: 5px;
    padding: 10px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4_6pvlyyvp0ri7Pv8kwP4ep5lN6qunwiDkd2w2flnZ1atyLWm4_jsCitPa0oQ3t52atUp0R909ebQHGsK8f-Aoex___tHLSWIZb5CX3r8lCJGuPB8Ma2d83jGDBwvUOJRddAem0gWgM/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Html code that you can plug manually per article (can be mounted directly to the post through html editor)

<Div class = 'content-box-infoindong'>
<Div itemscope = '' itemtype = 'http: //schema.org/Review'>
<Table>
<Div itemprop = 'itemReviewed' itemscope = '' itemtype = 'http: //schema.org/Thing'>
<Meta content = 'Write the title of your article here' itemprop = 'name' />
 </ Div>
<Tr align = 'justify'>
<Td width = '20% '> Title
</ Td>
<Td width = '60% '> <span itemprop =' name '> Write the title of your article here </ span>
</ Td>
</ Tr>
<Tr align = 'justify'>
<Td width = '20% '> Description
</ Td>
<Td width = '60% '> <span itemprop =' description '> Enter a brief description of your article here </ span>
</ Td>
</ Tr>
<Tr align = 'justify'>
<Td width = '20% '> Author
</ Td>
<Td width = '60% '> <span itemprop =' author '> Fill in your name here </ span>
</ Td>
</ Tr>
<Tr align = 'justify'>
<Td width = '20% '> Author Rating
</ Td>
<Td width = '60% '> <div itemprop =' reviewRating 'itemscope =' 'itemtype =' http: //schema.org/Rating '> <meta content =' 1 'itemprop =' worstRating '/>
      <Span itemprop = 'ratingValue'> 4 </ span> /
      <Span itemprop = 'bestRating'> 5 </ span> Voice </ div>
</ Td>
</ Tr>
</ Table>
</ Div>
</ Div>

If you want every post has a star rating, first please go to the template editor and then locate the code

<b: if cond = 'data: the blog.pageType == & quot; item & quot;'>
<data: post.body />

Code search quickly press CTRL + F.
Please copy the following code under the code <data: post.body />. (Each template has a different structure.

<div class = 'content-box-infoindong'>
<div itemscope = '' itemtype = 'http: //schema.org/Review'>
<table>
<div itemprop = 'itemReviewed' itemscope = '' itemtype = 'http: //schema.org/Thing'>
<meta expr: content = 'Data: post.title' itemprop = 'name' />
  </ div>
<tr align = 'justify'>
<td width = '20% '> Title
</ td>
<td width = '60% '> <span itemprop =' name '> <data: post.title /> </ span>
</ td>
</ tr>
<tr align = 'justify'>
<td width = '20% '> Description
</ td>
<td width = '60% '> <span itemprop =' description '> <data: post.snippet /> </ span>
</ td>
</ tr>
<tr align = 'justify'>
<td width = '20% '> Author
</ td>
<td width = '60% '> <span itemprop =' author '> <data: post.author /> </ span>
</ td>
</ tr>
<tr align = 'justify'>
<td width = '20% '> Author Rating
</ td>
<td width = '60% '> <div itemprop =' reviewRating 'itemscope =' 'itemtype =' http: //schema.org/Rating '> <meta content =' 1 'itemprop =' worstRating '/>
       <span itemprop = 'ratingValue'> 4 </ span> /
       <span itemprop = 'bestRating'> 5 </ span> Voice </ div>
</ td>
</ tr>
</ table>
</ div>
</ div>

Example 2 Individual rating display on the blog

Css code that you need to plug in the template.
First please find the code]]> </ b: skin>
Then paste the following css code above]]> </ b: skin>

.content-box-infoindong {
    background-color: rgb(241, 246, 249);
    border: 4px dashed rgb(31, 168, 245);
    margin: 5px;
    padding: 10px;
    background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjT4_6pvlyyvp0ri7Pv8kwP4ep5lN6qunwiDkd2w2flnZ1atyLWm4_jsCitPa0oQ3t52atUp0R909ebQHGsK8f-Aoex___tHLSWIZb5CX3r8lCJGuPB8Ma2d83jGDBwvUOJRddAem0gWgM/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

For installation html code star rating similar to Example 1 above individual rating, can be used to manually or automatically per article on all articles. Please select one.

Note:
*Please choose one type, individual rating.
*Special manuals rating, some writings include "Write the title of your article here, Enter a brief description of your article here, fill in your name here" please be replaced.
*Number 4 in the author's rating could be replaced with the numbers 1 through 5
*WorstRating, bestRating, ratingValue can be converted into the form of percent, for example WorstRating = 1%, besstRating = 100%, ratingValue = 75%.
*Make sure you snipets rich star rating appears, to test it please go to 'google rich snipets tool', when there are errors be addressed, if the difficulty, please comment below.

Below is a sample display star rating on google rich snipets tool with value percent.

So first, I discuss about How to make a star rating accompanied with CSS
May be useful for you all, who read it.