Langsung ke konten utama

Cara Membuat Widget Popular Post Dengan Rating Bintang

Di dalam sebuah blog terdapat berbagai macam widget, dari widget recent post, random post, dan popular post. Karena sebelumnya saya sudah sering memberikan cara membuat widget recent post dan random post dengan berbagai jenis style, untuk pertama kalinya saya akan membagikan cara membuat widget popular post dengan rating bintang.
Cara Membuat Widget Popular Post Dengan Rating Bintang


Efek bintang ini sebetulnya sebagai tanda rating, rating ini bukan di dapat dari pengunjung tetapi di dapat dari banyaknya jumlah view dari artikel tersebut. Efek bintang ini di buat dengan font awesome.

(Baca juga : Cara Membuat Tombol Back To Top di Blog dengan Font Awesome)

Jika sobat sering memodifikasi blog sobat, maka sobat pasti sudah mengerti tentang font awsome ini. Dimana terdapat icon yang bisa di masukan dengan mudah, dan juga font awesome ini sangat di gemari bagi para web developer khususnya pada tampilan sebuah website.

Untuk lebih jelasnya mengenai cara pemasangan widget popular post ini, ikuti langkah-langkah dari saya berikut ini.


Cara Memasang Widget Popular Post Dengan Rating Bintang

Cara Memasang Plugin Font Awesome

  1. Langkah pertama masuk ke akun Blogger sobat
  2. Pilih menu Tema, Edit HTML, jika template blog sobat belum menerapkan kode plugin font awesome, sobat harus memasukan kode di bawah ini tepat di atas kode </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>


(Baca juga : Cara Membuat Widget Recent Post Dengan Gambar, Keterangan Waktu & Komentar)


Cara Memasang Widget Popular Post Dengan Efek Bintang Berwarna Kuning

  • Cari kode ]]></b:skin> atau </style>, masukan kode CSS di bawah ini tepat di atasnya
/* Popular Post dengan bintang kuning by https://tutorialbloggerindo1.blogspot.co.id/ */
.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 solid #F1F1F1}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#F29B10;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\f123';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}
.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}
    • Catatan : Jika sobat sudah mengetahui letak kode CSS popular post yang lama, sobat bisa menghapusnya terlebih dahulu.
  • Setelah selesai, pilih Simpan Tema
  • Jika berhasil maka tampilan akan menjadi seperti ini.
    Memberikan Efek Rating Bintang di Popular Post dengan Font Awesome

(Baca juga : Cara Mudah Membuat Widget Artikel Pilihan Di Blog)


Cara Memasang Widget Popular Post Dengan Efek Bintang Berwarna Biru

  • Cari kode ]]></b:skin> atau </style>, masukan kode CSS di bawah ini tepat di atasnya
/* Popular Post dengan bintang warna biru by https://tutorialbloggerindo1.blogspot.co.id/ */
.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 solid #F1F1F1}
.PopularPosts ul li:before{font-family:fontawesome;content:'\f005\f005\f005\f005\f005';display:inline-block;position:absolute;color:#30AEE1;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\f123';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'\f005\f005\f005\f005\f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'\f005\f005\f005\f123\f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'\f005\f005\f005\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(6):before{font-family:fontawesome;content:'\f005\f005\f123\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(7):before{font-family:fontawesome;content:'\f005\f005\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(8):before{font-family:fontawesome;content:'\f005\f123\f006\f006\f006';opacity:.7}
.PopularPosts ul li:nth-child(9):before{font-family:fontawesome;content:'\f005\f006\f006\f006\f006';opacity:.75}
.PopularPosts ul li:nth-child(10):before{font-family:fontawesome;content:'\f123\f006\f006\f006\f006';opacity:.7}
.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}
    • Catatan : Jika sobat sudah mengetahui letak kode CSS popular post yang lama, sobat bisa menghapusnya terlebih dahulu.
  • Setelah selesai, pilih Simpan Tema
  • Jika berhasil maka tampilan akan menjadi seperti ini.
    Cara Membuat Widget Popular Post Dengan Rating Bintang

(Baca juga : Cara Membuat Widget Komentar Terbaru dengan Avatar)

Demikian tutorial dari saya, mengenai cara memasang widget popular post dengan efek rating bintang. Jika ada pertanyaan mengenai cara pemasangannya, atau mengenai widget popular post ini, silahkan masukan ke dalam kolom komentar.

Terima kasih sudah berkunjung di blog Tutorial Umum. Untuk tutorial yang lainnya mengenai widget blogger dan tutorial blogger lainnya, silahkan tetap kunjungi blog Tutorial Umum.

Postingan populer dari blog ini

Cara Membuat Kode Iklan AdSense di Samping Text Artikel

Setelah sebelumnya saya membagikan beberapa cara memasang kode iklan adsense seperti berada di tengah artikel ataupun di tengah menu beranda , pada kesempatan kali ini saya akan memberikan cara memasang kode iklan adsense di samping teks artikel . (Baca juga : Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Berikut adalah contoh iklan yang berada di samping teks artikel. Cara pemasangan ini adalah cara yang paling di anjurkan, karena pengunjung blog bisa langsung melihat iklan yang ada. Cara ini juga sangat di rekomendasikan oleh adsense sendiri karena tidak terlalu merusak pemandangan dari para pengunjung blog tersebut. Untuk ukuran iklan yang di gunakan agar posisi teks artikel rata dan bisa dengan mudah di baca, adalah ukuran 300x250 . Dengan format responsif atau yang terlihat logo smartphone di dalam pilihan iklan tersebut. (Baca juga : Cara Membuat Iklan AdSense Berada di Antara Tag Heading ) Cara pemasangannya cukup mudah, untuk cara memasangnya ikuti langkah-langkah ...
Baca Lebih Lanjut »

Cara Daftar dan Menggunakan MediaFire dengan Mudah

MediaFire adalah sebuah situs file hosting yang menyediakan penyimpanan berkas-berkas dan file. Situs file hosting yang di buat pada tahun 2006 ini menjadi tempat media penyimpanan terfavorit di dunia, selain Google Drive . Untuk itu pada tutorial kali ini saya akan memberikan tutorial cara daftar dan menggunakan mediafire dengan mudah . Sebelum saya membagikan cara daftar dan menggunakan mediafire , agan harus mengetahui kelebihan dan kekurangan dari file hosting mediafire. Berikut adalah kelebihan dan kekuarangan file hosting mediafire. (Baca juga :  Cara Memasang Komentar Disqus di Blogger dengan Mudah ) Kelebihan dan Kekurangan File Hosting MediaFire Kelebihan File Hosting MediaFire Simple dan tidak rumit seperti file hosting yang lain. File yang ingin di download akan langsung terdownload. Berbeda dengan file hosting lain, untuk akun free atau BASIC di berikan 10GB ruang penyimpanan, sehingga dapat menyimpan lebih banyak file. Bebas di bagikan kemana saja. Bebas di download...
Baca Lebih Lanjut »