Welcome, Guest. Saling Tukar link yuk? klik di sini ×
Memasang Rating Bintang Modifikasi CSS Keren

Modifikasi Rating Bintang dengan CSS
Modifikasi Rating Bintang dengan CSS
Pembuatan Rating Bintang Modifikasi Css Menarik ini merupakan postingan lanjutan dari artikel sebelumnya yang berjudul "Cara Membuat Rating Bintang Di Blog".

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
Rating Bintang
Rating Bintang Dengan Properties Standar Disertai Css Menarik

Propertis standar yang saya maksud disini adalah format metadata tidak hanya menggunakan name, author, dan rating saja namun ada beberapa tambahan seperti deskripsi. Kode html-nya bisa Anda salin langsung. Disini saya akan memberitahukan design rating untuk 2 tipe yaitu individual rating dan aggregate rating.

Individual Rating


Contoh 1 individual rating tampilan di blog

Judul Memasang Rating Bintang Modifikasi CSS Keren
Deskripsi Isikan deskripsi singkat artikel Anda disini
Author Isikan nama Anda disini
Author Rating 4/ 5 Suara

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/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/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

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

Pencarian kode cepat tekan tombol keyboard CTRL+F .
Silahkan salin kode berikut di bawah kode <data:post.body/>. (Setiap template mempunyai struktur berbeda-beda)

<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>

Contoh 2 individual rating tampilan di blog
Judul Memasang Rating Bintang Modifikasi CSS Keren
Deskripsi Isikan deskripsi singkat artikel Anda disini
Author Isikan nama Anda disini
Author Rating 4/ 5 Suara

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 {
    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/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Untuk pemasangan kode html rating bintang sama dengan contoh 1 individual rating di atas, bisa pakai untuk manual per artikel maupun otomatis di semua artikel. Silahkan pilih salah satu.

Aggregate Rating


Contoh 1 aggregate rating tampilan di blog
Judul Memasang Rating Bintang Modifikasi CSS Keren
Deskripsi Isikan deskripsi singkat artikel Anda disini
Author Isikan nama Anda disini
Author Rating 4/5 Suara dari 1001 ulasan

Di bawah ini merupakan kode css yang harus Anda pasang di template blogger, 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/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/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 postingan (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/AggregateRating'><meta content='1' itemprop='worstRating'/>
      <span itemprop='ratingValue'>4</span>/
      <span itemprop='bestRating'>5</span> Suara Dari <span itemprop="ratingCount">1001</span> Ulasan</div>
</td>
</tr>
</table>
</div>
</div>

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

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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/AggregateRating'><meta content='1' itemprop='worstRating'/>
      <span itemprop='ratingValue'>4</span>/
      <span itemprop='bestRating'>5</span> Suara Dari <span itemprop="ratingCount">1001</span> Ulasan</div>
</td>
</tr>
</table>
</div>
</div>

Contoh 2 aggregate rating tampilan di blog
Judul Memasang Rating Bintang Modifikasi CSS Keren
Deskripsi Isikan deskripsi singkat artikel Anda disini
Author Isikan nama Anda disini
Author Rating 4/5 Suara dari 1001 ulasan

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 {
    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/AVvXsEjbzXUw9-wlgNk4rv8Au11s-c8VkK6u6l06ZD2ToqnwEi37vc5o7aZnP5WnQyjHafS0Oi6bRgAKpcBvOXZUDPY8YmnsmHNlU9shqSXmRHpjaqocop7XbHVdICaPgO8eHSLe6AImhGCpc-E/s1600/author+review+infoindong+dot+com.png) bottom right no-repeat rgb(241, 246, 249);background-size:150px 39px !important;
}

Untuk pemasangan kode html rating bintang sama dengan contoh 1 aggregate rating di atas, bisa pakai untuk manual per artikel maupun otomatis di semua artikel.

Catatan

  • Silahkan memilih salah satu tipe, individual atau aggregate rating.

  • Khusus manual rating, beberapa tulisan meliputi "Tulis judul artikel Anda disini, Isikan deskripsi singkat artikel Anda disini, Isikan nama Anda disini" silahkan diganti.

  • Angka 4 dalam author rating bisa diganti dengan angka 1 sampai 5

  • WorstRating, bestRating, ratingValue bisa diubah ke bentuk persen, misal WorstRating = 1%, besstRating = 100%, ratingValue   =  75%.
Di bawah ini merupakan contoh tampilan rating bintang pada google rich snipets tool dengan value persen :
Contoh Rating Persen
Contoh Rating Persen
Sekian Terima Kasih !

Sumur : http://www.infoindong.com/2013/02/pembuatan-rating-bintang-disertai-css.html
CARA MARKUP DI KOMENTAR :

* Khusus Disqus
    Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
    Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
    Untuk menulis huruf underline silahkan gunakan <u></u>.
    Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
    Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.
DILARANG SPAM & FLAMMING !!!

Post a Comment Blogger Disqus

Tidak ada Komentar, jadilah yang Pertamax!
 
Top
Silahkan Pilih :
Login