Cara Membuat Rating Bintang di Blog

 Hiirotaku - di artikel kali ini kita akan membahas rating bintang pada blog, di artikel sebelumnya saya sudah membahas rating bintang atau rating star juga, namun kali ini berbeda karena pada artikel sebelumnya rating bisa di isi oleh pengunjung atau dengan cara voting, namun pada artikel kali ini kita akan membagikan script rating bintang yang diberi secara manual.

Kegunaannya sendiri jika kalian sedang membahas sesuatu seperti tentang film, anime, drakor, atau bahkan mereview seperti makanan, kenyamanan suatu kendaraan dan lain-lain.

Oke langsung saja kalian bisa salin kode di bawah ini.

Pertama, salin kode css di bawah ini seperti biasa di atas kode ]]></b:skin> atau </style>

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css);
.rating,.rating *,::after,::before{box-sizing:border-box}
.rating{background:#343434;padding:8px;margin-top:9px;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px;overflow:hidden;word-break:normal}
.rating-prc .rtp{overflow:hidden;display:inline-block;float:left}
.rating-prc .rtp .rtb{position:relative;overflow:hidden;color:#ffc700;height:15px;line-height:1;width:85px;font-size:15px;margin:0 auto}
.rating-prc .rtp .rtb:before{content:"\f005\f005\f005\f005\f005";font-family:"Font Awesome 5 Free";position:absolute;top:0;left:0;color:#686868;height:15px}
.rating-prc .rtp .rtb span{overflow:hidden;top:0;left:0;position:absolute;padding-top:15px}
.rating-prc .rtp .rtb span:before{content:"\f005\f005\f005\f005\f005";font-family:"Font Awesome 5 Free";font-weight:900;top:0;position:absolute;left:0}
.rating-prc .num{float:right;line-height:normal;font-size:13px;color:#eee}

Kedua, salin kode html di bawah ini, dan buat artikel pastekan di bawahnya (MODE HTML)

<div class="rating">
  <div class="rating-prc" itemprop="aggregateRating" itemscope="itemscope" itemtype="//schema.org/AggregateRating">
    <meta content="1" itemprop="worstRating">
    <meta content="10" itemprop="bestRating">
    <meta content="10" itemprop="ratingCount">
    <div class="rtp">
      <div class="rtb"><span style="width:100%"></span></div>
    </div>
    <div class="num" content="10.0" itemprop="ratingValue">
      10.0
    </div>
  </div>
</div>

Ubah yang di tandai sesuai selera kalian

DEMO

sc : dagruel