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.
4 Komentar:
Mantap! Bikinin juga tutorial cara membuat rating bintang di bawah postingan kayak di postingan ini bro...
Nanti bakal di buatkan kok kak, silahkan di tunggu ya terima kasih sudah berkunjung di Jagoandzgn
Waduh menarik untuk Saya jadikan referensi di blog saya.
Work kang
Thanks infonya
Posting Komentar
Berlangganan Posting Komentar [Atom]
<< Beranda