Cara Memberi Rating Bintang pada Widget Popular Posts di Blog - Kurazone Blog | Panduan Belajar Blogger Pemula

Cara Memberi Rating Bintang pada Widget Popular Posts di Blog

Pilihan Editor :

Cara Memberi Rating Bintang pada Widget Popular Posts di Blog
Penulis Bagus Surochman
0
Modus malam




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
nanio
Cara Memberi Rating Bintang pada Widget Popular Posts di Blog
Cara Memberi Rating Bintang pada Widget Popular Posts di Blog Cara Memberi Rating Bintang pada Widget Popular Posts di Blog Reviewed by Bagus Surochman on 5/09/2018

Tidak ada komentar:

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.