Cara Membuat Efek Rating Bintang di Popular Post

Ada saja kreasi seseorang dalam mendesain sebuah blog atau website. Salah satunya adalah dalam membuat efek rating bintang pada popular post seperti pada gambar di atas. Maka pada kesempatan ini Nngonline06 akan berbagi cara membuat efek tersebut.

Pemberian efek ini tentu akan membuat nilai plus bagi pengunjung serta bisa mengetahui seberapa besar minta pembaca terhadap artikel tersebut. Dari efek di atas, seorang pengunjung bisa dengan mudah menilai kualitas dan bobot tulisan yang diberikan rating bintang tersebut. Walau memang tidak selalu benar, namun setidaknya gambaran rating menunjukkan banyaknya pengunjung mengunjunginya.

Maka tak salah sahabat jika membumbuhi efek tersebut agar menarik hati pengunjung blog sahabat. Ingat, pengunjung yang betah untuk menjelajahi blog, maka dipastikan blognya akan 'hidup' dan pastinya nyaman.

Berbeda halnya dengan jika blog tak ada nilai 'interest', maka pengunjung pun langsung 'go' setelah mendapatkan apa yang dicarinya. Ini tentu akan berakibat tingginya BOUNCH.

Cara Membuat Efek Rating Bintang di Popular Post

OK, langsung saja, jika sahabat tertarik untuk memberikan efek bintang pada widget popular post, maka berikut adalah 3 langkah membuat efek bintang pada widget popular post atau postingan terpopuler.

#Langkah Pertama

Silahkan langsung kunjungi template blog sahabat dan cari kode </head>. Letakkan kode berikut ini, tepat di atas kode </head>. (Widget ini menggunakan font awesome)

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Catatan: jika kode di atas sudah terpasang di template sahabat, maka tak perlu lagi diisi.

#Langkah Kedua

Setelah itu, temukan kode ]]></b:skin> atau </style>. Letakkan kode di bawah ini tepat sebelum kode tersebut. Berikut ada 3 style yang bisa dipilih salah satu. Silahkan dipilih sesuai selera sahabat Ngonline06 semua.  
Style A
 /* Popular Post */<br /> .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}<br /> .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}<br /> .PopularPosts ul{margin:0;list-style:none;color:#64707a}<br /> .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}<br /> .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}<br /> .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}<br /> .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}<br /> .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f006\f005\f005\f005\f005';opacity:.9}<br /> .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}<br /> .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}<br /> .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\f005';opacity:.75}<br /> .PopularPosts ul li:hover:before{opacity:1}<br /> .PopularPosts ul li:first-child{border-top:none}<br /> .PopularPosts ul li:last-child{border-bottom:none}<br /> .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}<br /> .PopularPosts ul li a:hover{color:#2476e0;}<br /> .PopularPosts .item-thumbnail{margin:0;}<br /> .PopularPosts .item-snippet{display:none}<br /> .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
Style B
 /* Popular Post */<br /> .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}<br /> .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}<br /> .PopularPosts ul{margin:0;list-style:none;color:#64707a}<br /> .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}<br /> .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}<br /> .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}<br /> .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}<br /> .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.9}<br /> .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.85}<br /> .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.8}<br /> .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}<br /> .PopularPosts ul li:hover:before{opacity:1}<br /> .PopularPosts ul li:first-child{border-top:none}<br /> .PopularPosts ul li:last-child{border-bottom:none}<br /> .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}<br /> .PopularPosts ul li a:hover{color:#2476e0;}<br /> .PopularPosts .item-thumbnail{margin:0;}<br /> .PopularPosts .item-snippet{display:none}<br /> .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}
Style C
/* Popular Post */<br /> .PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}<br /> .PopularPosts li,.PopularPosts li img,.PopularPosts li a,.PopularPosts li a img{margin:0;padding:0;list-style:none;border:none;background:none;outline:none}<br /> .PopularPosts ul{margin:0;list-style:none;color:#64707a}<br /> .PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}<br /> .PopularPosts ul li{position:relative;background-color:#fff;margin:0;padding:.7em 0!important;border:0;position:relative;border-bottom:1px dotted rgba(0,0,0,0.2)}<br /> .PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#f39c12;text-align:center;bottom:0;right:0;margin:9px 0;font-size:11px;padding:0;font-weight:normal;line-height:normal;transition:all .3s}<br /> .PopularPosts ul li:nth-child(1):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';}<br /> .PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'\f005\f005\f005\f005';opacity:.9}<br /> .PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}<br /> .PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}<br /> .PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';opacity:.75}<br /> .PopularPosts ul li:hover:before{opacity:1}<br /> .PopularPosts ul li:first-child{border-top:none}<br /> .PopularPosts ul li:last-child{border-bottom:none}<br /> .PopularPosts ul li .item-title a,.PopularPosts ul li a{color:#333;font-size:13px;}<br /> .PopularPosts ul li a:hover{color:#2476e0;}<br /> .PopularPosts .item-thumbnail{margin:0;}<br /> .PopularPosts .item-snippet{display:none}<br /> .PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

#Langkah Ketiga

Simpan template sahabat.

Demikian cara membuat efek rating bintang pada popular post yang bisa Ngonline06 bagikan. Tutorial ini adalah trik dari arlina design, semoga membantu para sahabat semua. Jika ada hal yang belum dipahami ataupun kesulitan, silahkan dicoret-coret saja kotak komentar di bawah. Salam sukses dari Ngonline06 selalu untuk para sahabat semua...