Home
BLOG
Tips dan Trik

Widget Popular Post dengan Rating Stars.


Hallo teman teman, Dalam posting kali ini, saya akan berbagi widget Popular post dengan Tambahan Rating Stars yang akan menampilkan widget postingan populer dengan penilaian bintang. Kalo ga salah , widget ini pertama kali dirilis oleh Arlina. Tetapi widgetnya punya satu batasan utama kalo penilaian bintangnya tidak dapat ditampilkan pada lebih dari 5 posting. Jadi saya telah memodifikasi widget ini dan melakukan beberapa perubahan. Dan secara defaul maksimal Popular post yang tampil pada suatu situs adalah 10 post, dan tentunya weidget Rating Star ini bisa tampil untuk 10 Postingan. Selain itu, Sobat dapat menampilkan rating bintang kuning dan biru di blog sobat.


Cara menambahkan Widget Popular Post dengan Rating Stars.


Sebelum melanjutkan ke step pertama, silahkan Backup dahulu template sobat.
1. Jika sudah seperti biasa Login ke akun blogger sobar dan masuk ke halaman Dashboard
2. Masuk ke Tata Letak / Layout
3. Tambahkan Gadget - Lalu klik Popular Post silahkan sesuaikan posisi dan letak, Biasanya di pasang di bagian Side Bar Bagian paling atas

4. Silahkan atur sesuai keinginan sobat
5. Jika sudah klik simpan dan kita lanjutkan ke step berikutnya.

Menambahkan Font Awesome pada template blog.

Kita tahu bahwa Blogger tidak mendukung Rating Stars, jadi kita akan menampilkan Rating dengan skrip Font Awesome. Jika template Sobat sudah berisi file Font Awesome, maka lewati langkah ini. Tetapi jika belum, ikuti langkah di bawah ini untuk menambahkan file Font Awesome di template Blogger Sobat.

1. Dari Dasbor Blogger, klik -> Template -> Edit HTML
2. Sekarang cari kode <head> dengan menekan Ctrl + F (Windows) atau CMD + F (Mac)
3. Tempelkan kode Font Awesome di bawah, tepat setelah <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
4. Save template

Menambahkan Scrip Widget Rating Bintng Biru / Kuning.

1. Dari Dasbor Blogger, klik -> Template -> Edit HTML
2. Sekarang cari kode ]]></b:skin> dengan menekan Ctrl + F (Windows) atau CMD + F (Mac)
3. Tempelkan kode di bawah, tepat setelah ]]></b:skin>

- Script Rating Biru
/* Popular Post with Blue Star Rating by https://www.idngrafis.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}
- Script Rating Kuning
/* Popular Post with Yellow Star Rating by https://www.idngrafis.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}
Save Template, dan silahakn cek apakah widget sudah tampil dengan benar atau tidak, jika demikian silahkan tinggalkan komentar di bawah ini :)

Post a Comment