Cara Memberi Rating Bintang pada Widget Popular Posts di Blog


KURAZONE ~ Rating bintang selalu memberikan daya pikat yang menarik bagi siapapun yang melihatnya, karena rating berupa bintang inilah seseorang bisa mengetahui sebagus apa konten tersebut.
Alhasil memberikan kesan bahwa konten pada blog Si A inilah yang paling menarik untuk dibaca. Salah satunya adalah seperti Widget Popular Post pada gambar dibawah ini:


CARA MEMBERI RATING

1. Masuk ke akun Blogger >> Pilih Tema / Template >> Pilih Edit HTML.
2. Selanjutnya cari kode ]]></b:skin>,  copy kode dibawah ini, lalu letakkan (paste) tepat diatas kode ]]></b:skin>.
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:10px;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}
.PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:hover:before{opacity:1}
.PopularPosts ul li:first-child{border-top:none}
.PopularPosts ul li:last-child{border-bottom:none}
.PopularPosts ul li .item-title a,.PopularPosts ul li a{color:black;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{padding-bottom:.2em;}
3. Simpan Template >> Selesai

Note :
  1. Kode Rating Bintang ini support pada template tema dark maupun light. Jika kalian menggunakan tema dark, maka ubah color:black menjadi color:white (lihat kode yang ditandai warna kuning).
  2. Untuk warna bintang ditentukan oleh kode color:#f39c12. Silahkan kalian ubah  kode #f39c12 menjadi kode warna favorit kalian.
  3. Sedangkan untuk kode color:#2476e0, adalah warna link ketika tersentuh kursor. Silahkan kalian ubah  kode #2476e0 menjadi kode warna favorit kalian.
  4. Kode ini cocok untuk Popular Posts yang berjumlah 5 posts dengan pengaturan TANPA SNIPPET (tidak support untuk Popular Posts yang disetting 10 posts).
  5. Responsive, Fast Loading dan Elegant.
  6. Jangan lupa untuk menambahkan kode CSS Fontawesome agar ikon bintang bisa muncul. (abaikan jika template kalian sudah mendukung Fontawesome)
> Jika dirasa terjadi bentrok atau tampilan berantakan, maka hapus bagian ini :
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{padding-bottom:.2em;}

Cukup mudah ya ternyata!? Itulah informasi mengenai "Cara Memberi Rating Bintang pada Widget Popular Posts di Blog", selamat mencoba dan semoga bermanfaat. Goodluck.

image by : http://qimiow.blogspot.com





Lebih baru Lebih lama