Cara Memasang rating bintang di Populer Post

adscblog

Banyak sekali kreasi di blogger ini,kalu tidak related post,template dan bahkan juga ada trik tidak kalah menarik nya dari trik lain nya yaitu membuat rating bintang pada Populer Post di widget,tidak sedikit trik untuk mempercantik Populer post ini mulai dari meng kreasikan thumbnail nya sampai dengan background Populer post tersebut dan kali ini membuat rating Bintang di bagian populer Post

Yang tentu nya trik ini juga akan menambah nilai plus para pengunjung terhadap blog kita karena tampilan Rating bintang ini,Jika di blog lain nya yang juga di pasang Plugin Rating bintang ini akan terlihat seberapa banyak orang yang mengunjugni salah satu artikel di blog tersebut dengan di tandai jumlah rating bintang yang muncul

Maka para sobat blogger tidak salah jika anda menerapkan trik ini di blogger anda agar para pengunjung semakin betah berada di blog kita dengan berbagai artikel yang sudah kita sediakan,dan jika ada pengunjung yang betah di blog kita maka tentu nya blog kita akan semakin hidup dan semakin berekmbang,oleh karena itu salah satu untuk membuat betah para pengunjung adalah dengan cara ini

Beda lagi dengan blog yang tidak teratur maka pengunjung yang setiap kali datang untuk membaca artikel di blog kita merasa cepat bosan dan tidak betah untuk tetap di bllog kita untuk membaca artikel selanjut nya,jadi penampilan blog juga sangat berpengaruh terhadap peningkatan pengunjung

Menambahkan Rating Bintang di Populer Post

Bisa anda lihat untuk contoh nya pada bagian gambar di atas,jika anda tertarik untuk menerapkan Rating Bintang di widget Populer post ini anda bisa menggunakan langkah di bawah ini dan menerapkan kode di bawah ini,cara penggunaan nya juga cukup simple,hanya menerapkan kode nya di bagian CSS template anda

Style 1

.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.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}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.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)}
.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}
.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';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005';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:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Style II

/* Popular Post */
.PopularPosts ul{background:#fff;list-style:none;margin:0;padding:5px 5px 0;overflow:hidden;border-top:none}
.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}
.PopularPosts ul{margin:0;list-style:none;color:#64707a}
.PopularPosts ul li img{background:#fafafa;display:block;margin:0 10px 0 0;width:60px;height:60px;overflow:hidden;float:left;}
.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)}
.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}
.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:#333;font-size:13px;}
.PopularPosts ul li a:hover{color:#2476e0;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{font-weight:700;padding-bottom:.2em;padding:0 5px}

Kemudian Save template dan lihat hasil nya di bagian blog anda,apakah sudah ada tampilan nya,namun jika rating bintang nya tidak tampil,anda harus mencari script font awesome dan memasang nya di template anda,nah itulah cara pemasangan rating bintang pada bagian populer post,semoga bermanfaat

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 12 November and have 0 komentar