Pembuatan Rating Bintang Disertai Css Menarik

Pembuatan Rating Bintang Disertai Css Menarik ini merupakan postingan lanjutan dari artikel sebelumnya yang berjudul "Cara Membuat Rating Bintang".
Saya juga ingin mengingatkan bahwa ada 2 tipe rating bintang rich snipets yaitu individual rating dan aggregate rating. Dalam pemasangan kode html microdata untuk blog terdapat 2 cara : pemasangan manual di tiap postingan atau secara otomatis agar bisa tampil di seluruh postingan melalui template blogger.

Disini saya akan memberikan sentuhan berupa design css agar tampilan review rating pada blog terlihat menarik serta menggunakan propertis rich snipets rating standar dari schema.org contohnya seperti gambar di bawah ini :

Rating Bintang Dengan Propertis Standar Disertai Css Menarik

Contoh 1 individual rating tampilan di blog :

Kode css yang harus Anda pasang di template, pertama silahkan cari kode ]]></b:skin>kemudian paste kode css berikut di atas ]]></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/AVvXsEhk30Ebc7lYaNtm0hBgwiDySMCW6G0un6HgQPDL3s57XTkvQgCXYyVCF6Ych0XI1152ZkU5mG4fJwhYjycS82gYV_2ifOjLUDSUWZD0Mk_7-PhDhotEAitjcTwlmQUnAX428K2zMWiytAs/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Kode html yang bisa Anda pasang manual per artikel (bisa dipasang langsung ke postingan melalui editor html)

<div class='content-box-infoindong'>
<div itemscope='' itemtype='http://schema.org/Review'>
<table>
<div itemprop='itemReviewed' itemscope='' itemtype='http://schema.org/Thing'>
<meta content='Tulis judul artikel Anda disini' itemprop='name'/>
 </div>
<tr align='justify'>
<td width='20%'>Judul
</td>
<td width='60%'><span itemprop='name'>Tulis judul artikel Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Deskripsi
</td>
<td width='60%'><span itemprop='description'>Isikan deskripsi singkat artikel Anda disini</span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Author
</td>
<td width='60%'><span itemprop='author'>Isikan nama Anda disini</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> Suara</div>
</td>
</tr>
</table>
</div>
</div>

Bila Anda menginginkan setiap posting memiliki rating bintang, pertama silahkan menuju ke editor template kemudian cari kode

<data:post.body/>


Pencarian kode cepat tekan tombol keyboard CTRL+F .
Silahkan salin kode berikut di bawah kode <data:post.body/>.

<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%'>Judul
</td>
<td width='60%'><span itemprop='name'><data:post.title/></span>
</td>
</tr>
<tr align='justify'>
<td width='20%'>Deskripsi
</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> Suara</div>
</td>
</tr>
</table>
</div>
</div>