Widget Popular Posts dan Cara Pemasangannya. Widget popular posts meruapakan salah satu widget yang memiliki peranan penting dalam sebuah blog. Widget ini akan memberikan informasi seputar postingan yang menjadi hal yang paling sering dibaca (populer) oleh para pembaca blog. Menjadikan widget popular post menjadi lebih menarik tentu akan lebih baik. Berikut adalah Struktur Kode "Widget Popular Posts Dengan Rating Bintang dan Cara Pemasangannya". Semoga bermanfaat.
Langkah-langkah pemasangan widget popular posts dengan rating bintang:
- klik menu template
- klik Edit HTML
- cari kode <head>, kemudian letakkan kode script di bawah ini tepat setelahnya
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
- Selanjutnya cari kode ]]></b:skin>, kemudian letakkan kode di bawah ini tepat sebelumnya
/* Popular Post with Blue Star Rating by http://www.winmahdi.com/ */ .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}- terakhir klik simpan template
- lihat hasilnya di bagian popular posts Anda
- Jika berhasil akan menampilkan gambar kurang lebih seperti di bawah ini:
Ganti struktur kode popular posts di atas dengan kode popular posts di bawah ini, untuk mendapatkan rating bintang warna orange.
/*
Popular Post with Yellow Star Rating by http://www.winmahdi.com/ */
.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}
EmoticonEmoticon