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

4 Langkah Untuk Periklanan Gratis

Selalu ada beban keuangan yang signifikan terkait dengan mengiklankan produk, layanan, atau upaya seperti situs web. Omong-omong, saya selalu menjadi penggemar tren iklan gratis. Saya telah sukses dengan dua metode berbeda untuk memperoleh publisitas gratis yang ingin saya bagikan kepada Anda. Salah satu opsi adalah menempatkan iklan di situs web populer dan gratis. Saya telah menulis tentang beberapa situs teratas yang akan beriklan secara gratis. Mulailah dengan mengunjungi internetmarketinglearningcenter.com/classified-ads.html untuk menemukan platform periklanan gratis yang Anda inginkan. Cara kedua agar saya dapat memasang iklan tanpa mengeluarkan uang adalah dengan berinvestasi dalam Kursus Iklan Baris Gratis. Ini adalah kursus yang sangat singkat, dan saya harus membayar Clickbank $19,95 untuk mengakses alat promosi ini. Pergi ke tautan unduhan perangkat lunak gratis yang akan Anda gunakan untuk memposting dan memantau iklan Anda adalah sorotan dari Kursus Iklan Baris Gratis. Ku...
Baca Lebih Lanjut »

Cara Menambah Slot Widget Sidebar Template Evo Magz

Cara Menambah Slot Widget Sidebar Template Evo Magz - Widget adalah hal yang sangat penting dalam sebuah blog. Dengan sebuah widget, maka kelayakan dari blog tersebut untuk menjadi blog yang baik akan semakin terlihat. Banyak widget yang dapat di gunakan agar pengunjung dapat dengan mudah melihat halaman lain dari blog tersebut. Untuk itu menambah slot widget sangatlah di perlukan. (Baca juga : Cara Menghilangkan Garis Warna Warni Template Evo Magz ) Template Evo Magz buatan Mas Sugeng adalah template yang paling mudah untuk di kembangkan. Untuk itulah saya membuat tutorial cara menambah slot widget sidebar template evo magz . Tidak usah panjang lebar langsung saja ikuti langkah-langkah dari saya berikut ini. Cara Menambah Slot Widget Sidebar Template Evo Magz 1. Cara Menambah Slot Widget Sidebar Masuk ke akun blogger kalian Pilih menu Tata Letak , hapus semua widget yang ada di sidebar template evo magz Kemudian pilih menu Tema , pilih Edit HTML Cari skrip <b:section class='...
Baca Lebih Lanjut »