Cara Memasang Icon Rating Bintang di Widget Popular Post

Jagoandzgn.com - Pada Kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana cara memasang icon rating binyang di Widget popular post, Sebenarnya icon ini tidak berguna sih dengan blog kita hanya agar lebih menarik untuk di pandang dan pastinya tampil berbeda dari blog yang lainnya dan untuk tutorialnya mudah kok hanya menambahkan beberapa kode saja.

Rating ini pastinya selalu memberikan daya pikat yang menarik bagi siapapun yang meilhatnya dan rating ini juga berfungsi untuk mengetahui konten mana yang sering dikunjungi oleh pengunjung.

Cara Memasang Icon Rating Bintang di Widget Popular Post

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya cari kode ]]></b:skin> dan pastekan kode dibawah ini tepat DIATAS kode tersebut.

.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005';display:inline-block;position:absolute;color:#ffffff;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:#000000;}
.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{padding-bottom:.2em;}

4. Kalau sudah silahkan cari kode dibawah ini dan HAPUS kode tersebut agar tidak terjadi bentrok di widget tersebut.

.PopularPosts .item-thumbnail{margin:0;}
.PopularPosts .item-snippet{display:none}
.PopularPosts .item-title{padding-bottom:.2em;}

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Memasang Icon Rating Bintang di Widget Popular Post, untuk kamu yang ingin melihat demonya silahkan klik tombol demo diatas dan apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.