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.
Seorang yang memiliki kepribadian yang menyendiri, tanpa mengenal dunia luar hanya melalui dunia online saja.
  • Facebook
  • WhatsApp
  • Instagram
  • Tampilkan Komentar
    Sembunyikan Komentar

    3 Komentar

    1. Mantap! Bikinin juga tutorial cara membuat rating bintang di bawah postingan kayak di postingan ini bro...

      BalasHapus
      Balasan
      1. Nanti bakal di buatkan kok kak, silahkan di tunggu ya terima kasih sudah berkunjung di Jagoandzgn

        Hapus
    2. Waduh menarik untuk Saya jadikan referensi di blog saya.

      BalasHapus

    Iklan Atas Artikel

    Iklan Tengah Artikel 1

    Iklan Tengah Artikel 2

    Iklan Bawah Artikel