Cara Membuat Reting Level bintang Pada Widget Populer Post

Baca Juga

Cara Membuat Reting Level bintang Pada Widget Populer Post – mungkin sobat pernah melihat sebuah Widget populer post yang memiliki level bintang di setiap artikel yang di tampilkan di sana?, jika pernah dan ingin coba membuatnya sobat datang di tempat yang tepat karena saya memiliki solusinya agar populer post di blog sobat memiliki reting bintang. Reting Level Bintang ini berguna memberitahukan untuk para pencari sebuah artikel tentang seberapa populer kah artikel yang di tawarkan, selain itu Reting bintang ini juga dapat membuat blog sobat lebih menarik dan keren. Baiklah langsung saja kita cari tahu bagaimana cara membuat nya berikut ini.

Membuat Reting bintang di Widget Populer Post

Baca juga : Cara Paling Ampuh Mempercepat Loading Dengan Lazy Load

1. Login ke blog sobat > Masuk menu Template > Edit HTML > cari kode </head> dan letakkan kode di bawa ini sebelum kode </head>

</head>

<link href='//maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' rel='stylesheet'/>

Keterangan :Kode di atas adalah kode fount Awesome untuk pemanggil reting bintang, apabila sudah ada di blog sobat tidak usah di tambah lagi dengan kode yang sama.

2. cari kode  ]]><b:skin atau </style> dan letakka kode di bawah ini sebelum kode ]]><b:skin atau </style>

Gaya 1

/* Popular Post */
.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 dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;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:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f006f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f006f006f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f006f006f006f005f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f006f006f006f006f005';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:#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}

Gaya 2

 
/* Popular Post */
.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 dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;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:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005f006';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005f006f006';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005f006f006f006';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005f006f006f006f006';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:#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}

Gaya 3

/* Popular Post */
.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 dotted rgba(0,0,0,0.2)}
.PopularPosts ul li:before{font-family:fontawesome;content:'f005f005';display:inline-block;position:absolute;color:#f39c12;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:'f005f005f005f005f005';}
.PopularPosts ul li:nth-child(2):before{font-family:fontawesome;content:'f005f005f005f005';opacity:.9}
.PopularPosts ul li:nth-child(3):before{font-family:fontawesome;content:'f005f005f005';opacity:.85}
.PopularPosts ul li:nth-child(4):before{font-family:fontawesome;content:'f005f005';opacity:.8}
.PopularPosts ul li:nth-child(5):before{font-family:fontawesome;content:'f005';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:#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}

Keterangan :Silahkan pilih salah satu gaya populer pos dengan reting bintang di atas sesuai selera sobat.

3. Simpan Template dan Lihat Hasilnya.

Baca juga : Cara Mudah Daftar dan Hasilkan Uang Dari Popcash

untuk Demo silahkan sobat Lihat Populer Post Website ini

Demikian lah tutorial mengenai Cara Membuat Reting Level bintang Pada Widget Populer Post, dengan begini widget populer post dengan reting bintang sudah terpasang di blog sobat. semoga artikel yang singkat ini menjadi ilmu yang bermanfaat dan selamat mencoba bagi sobat pembaca semua. Untuk reting bintang di widget lainnya mungkin akan saya buat di lain kesempatan.