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 Memasang Script Redirect UC Browser ke Chrome Lebih Cepat

UC Browser memanglah browser terbaik untuk menampilkan halaman website tanpa iklan. Namun ini akan berdampak buruk bagi para publisher , khususnya publisher Google AdSense . Dengan banyaknya pengguna UC Browser, maka para publisher akan kehilangan banyak penghasilan. Untuk itulah pada tutorial kali ini saya akan memberikan cara memasang script redirect UC browser ke Chrome dengan mudah dan pastinya cepat . Script ini sebenarnya saya dapatkan dari forum ads.id, karena kebetulan script auto redirect ini lagi terkenal, akhirnya saya share ke blog saya. Script auto redirect ini mungkin bisa lebih cepat dari pada script auto redirect yang di share sebelumnya di forum ads.id, tapi saya juga belum tahu pasti seberapa cepat script ini bisa auto redirect dari UC browser ke Chrome. (Baca juga :  Cara Memasang Lebih Dari 2 In-Feed Ads Google AdSense ) Untuk cara memasangnya, langsung saja ikuti langkah-langkah dari saya di bawah ini. Cara Memasang Script Redirect UC Browser ke Chrome di Blog...
Baca Lebih Lanjut »

Cara Mudah Membuat Sitemap Untuk Blog

Sitemap sangatlah di butuhkan di setiap blog, apalagi sitemap memudahkan bagi pengunjung yang ingin tahu apa saja isi dari artikel yang kita miliki. Untuk itulah kali saya akan memberikan tutorial tentang cara mudah membuat sitemap untuk blog .   Sitemap ini di bagi berdasarkan label sehingga memudahkan pengunjung mencari berdasarkan label yang ada. (Baca juga : Inilah Cara Mudah Memasukan Halaman Statis(Laman) Di Menu Navigasi ) Apa lagi di tambah fitur tanda tulisan New! Apabila kita baru membuat sebuah artikel, sehingga pengunjung mudah membedakan mana artikel yang baru dibuat, dan mana yang artikel lama. Bagi yang ingin tahu cara memasangnya, ikuti langkah-langkah dari saya berikut ini. Cara Memasang Sitemap Untuk Blog Masuk akun Blogger kalian Pilih menu Laman , kemudian pilih Laman baru Di Laman pilih tab HTML , kemudian masukan skrip di bawah ini <style> p.labels a{color: #242424; text-transform: uppercase;font-size: 15px;} a.post-titles {color: #0000FF;} ol li{list-...
Baca Lebih Lanjut »

Cara Mudah Install XAMPP 1.7.3 di Komputer

Setelah sebelumnya ane memberikan tutorial tentang cara mudah uninstall XAMPP di komputer , kali ini ane akan memberikan tutorial tentang cara mudah install XAMPP 1.7.3 di komputer . (Baca juga :  Cara Mudah Uninstall XAMPP di Komputer ) Pengertian XAMPP XAMPP merupakan beberapa penggabungan beberapa program, yang berfungsi sebagai web server yang bisa berdiri sendiri. XAMPP terdiri atas beberapa program yaitu,  Apache HTTP Server , MySQL database, dan bahasa pemrograman PHP dan Perl . XAMPP sebenarnya adalah singkatan dari beberapa kata yaitu. X = Maksud dari huruf X adalah software ini dapat di jalankan di berbagai sistem operasi. A = Apache, apache adalah web server yang di gunakan untuk menjalankan sebuah halaman dengan kode PHP. M = MySql, MySql adalah database server yang di gunakan untuk menyimpan data-data yang di buat dengan bahasa Sql. P = PHP adalah bahasa pemrograman untuk menampilkan halaman web, dan membuat halaman web. P = Perl adalah bahasa pemograman yang ...
Baca Lebih Lanjut »

Momen Lucu yang terekam Google Street View

Momen Lucu yang terekam Google Street View - Google adalah sumber informasi yang paling sering digunakan saat ini. Tidak hanya sebuah mesin pencari , Google juga memiliki teknologi yang dinamakan Google Street View . Google Street View adalah teknologi yang mampu merekam setiap jalan yang di lewati mobil Google yang akan mengunggah gamabar ke peta Google atau yang kita kenal Google Map . Akan tetapi bukan hanya merekam jalan, teknologi ini banyak merekam hal-hal yang lucu dan menarik. Seperti beberapa momen berikut yang di kutip dari beberapa sumber yang ada berikut ini. Dijamin membuat anda tertawa dan bingung. Berikut adalah Momen Lucu yang terekam Google Street View : Momen Lucu yang terekam Google Street View 1. Ibu-ibu jatuh dari sepeda motor? Sumber gambar : kumparan.com Sumber gambar : kumparan.com 2. Dua orang berpakaian penyelam di tengah jalan? Sumber gambar : www.brilio.net 3. Orang sedang ngupil di dalam mobil Sumber gambar : www.unic77.net 4. Seorang persepeda jatuh da...
Baca Lebih Lanjut »