Halo semua sobat blogger, hari ini saya kembali hadir untuk membagikan tutorial Cara Memberikan Efek Rating Bintang di Widget Popular Post, dengan cara yang cukup mudah ini kalian bisa menambahkan efek rating yang bagus untuk Popular Post kalian, tetapi jika sebelumnya kalian telah memasang Cara Membuat Widget Popular Post Keren dan Elegan di Blog diblog kalian, kalian harus mencopotnya terlebih dahulu agar efeknya tidak bertumpuk, dan satu hal di tutorial kali ini kalian harus memasang FontAwesome terlebih dahulu karena disini kita membutuhkan bintang dari FontAwesome
Ya,Seperti gambar diatas lah contoh Popular Post yang sudah diberi Efek Rating Bintang,kalian juga dapat melihatnya secara live, di bagian sidebar blog saya pada Widget Popular Post
Bagaimana ? Tertarik untuk memasangnya ? Simak Tutorial dibawah
Memasang Font Awesome di Blog
1.Buka Blogger
2.Masuk ke Blog yang anda ingin pasang, lalu pilih Template dan klik Edit HTML
3.Cari kode </head> dan letakan kode dibawah ini diatasnya
<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>PERHATIAN !! JIKA DI BLOG KALIAN SUDAH TERPASANG FONTAWESOME,LANGSUNG KE STEP 2
Cara Memberikan Efek Rating Bintang di Widget Popular Post
1.Buka Blogger
2.Masuk ke Blog yang anda ingin pasang, lalu pilih Template dan klik Edit HTML
3.Cari kode ]]></b:skin> dan letakan kode dibawah ini diatasnya
/* Popular Post dengan Bintang */
.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:'\f006\f005\f005\f005\f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f006\f006\f005\f005\f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f006\f006\f006\f005\f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f006\f006\f006\f006\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}PERHATIAN !
Jika di Blog kalian sudah terdapat Kode CSS Popular Post, hapus dan ganti dengan kode diatas4.Silahkan Simpan Template dan tambahkan Widget Popular Post dan Cek Blog anda masing - masing
Cukup sekian dari post ini,semoga dapat menambah informasi bagi anda.
