Cara Membuat Rating Bintang di Setiap Artikel Blog

Cara Membuat Rating Bintang di Artikel Blog
Cara membuat rating bintang di setiap artikel blog - Sistem penilaian tidak didukung di platform blogger, tetapi kita dapat menampilkan peringkat dengan menggunakan sistem manual seperti rating. Namun dalam sistem nyata, pembaca akan menilai produk atau widget dengan memberi bintang. Sebenarnya ini bekerja paling baik di platform wordpress dan orang-orang dapat menilai dengan memilih produk dan layanan tertentu. Tetapi banyak pengguna platform blogger menyesal bahwa blogger tidak mendukung sistem peringkat yang luar biasa ini. Tetapi kita dapat merancang widget berdasarkan peringkat bintang di platform blogger juga, tetapi dalam kenyataannya itu tidak mengambil suara pembaca.


1. Cara Membuat Rating Bintang di Setiap Artikel Blog

Sebelum menambahkan rating bintang di widget posting populer, sobat harus menambahkan widgetnya terlebih dahulu di situs blog, dengan mengikuti panduan langkah-langkahnya dibawah ini :
#1.  Masuk ke blogger.
#2. Pilih menu tata letak.
#3. Lalu pilih tambahkan gadget> pilih postingan populer (bisa disesuaikan sesuai selera).
#4. Lakukan pengaturan postingan populer sesuai gambar dibawah ini > pilih simpan.
Cara Membuat Rating Bintang di Artikel Blog


2. Menambahkan Font Awesome di Rating Bintang Blog

Aku tahu bahwa blogger tidak mendukung rating bintang, sehingga aku akan menampilkan bintang dengan kode skrip font awesome. Jika template sobat sudah berisi file font awesome maka lewati saja langkah ini. Tetapi jika tidak maka silahkan ikuti langkah-langkah di bawah ini untuk menambahkan file font awesome di template blog sobat :
#1.  Masuk ke blogger.
#2. Pilih menu tema.
Cara Membuat Rating Bintang di Artikel Blog
#4. Copy dan pastekan kode dibawah ini di atas <head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>
#5. Dan klik tombol simpan template.

3. Cara Memasang Rating Bintang di Blog dengan Warna Biru

Cara Membuat Rating Bintang di Artikel Blog
Aku telah melihat di platform wordpress rating bintang biru dan kuning banyak digunakan untuk memilih konten. Jadi aku akan menunjukkan kepada sobat untuk menambahkan rating bintang tersebut. Namun pertama-tama mari kita tambahkan widget postingan populer dengan rating bintang biru dulu, caranya silahkan ikuti panduannya dibawah ini :
#1.  Masuk ke blogger.
#2. Pilih menu tema.
Cara Membuat Rating Bintang di Artikel Blog

#3. Copy dan pastekan kode dibawah sebelum/atas ]]></b:skin>

/* Popular Post with Blue Star Rating by http://www.monitasaki.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}
#5. Pilih simpan tema.

4. Cara Memasang Rating Bintang di Blog dengan Warna Kuning
Cara Membuat Rating Bintang di Artikel Blog
Sobat mungkin tidak menyukai peringkat bintang biru karena widget ini terlihat tidak menyenangkan. Jadi aku berbagi skrip lain untuk menambahkan peringkat bintang kuning di widget posting populer blog, yang akan membuat blog sobat nanti akan terasa lebih menyenangkan saat dikunjungi. Silahkan ikuti langkah-langkahnya di bawah ini untuk membuatnya :
#1.  Masuk ke blogger.
#2. Pilih menu tema.
Cara Membuat Rating Bintang di Artikel Blog

#3. Copy dan pastekan kode dibawah sebelum/atas ]]></b:skin>

/* Popular Post with Yellow Star Rating by http://www.monitasaki.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}
#5. Pilih simpan tema.
#6. Selesai.

Baca juga : daftarin blog lama ke blog baru dengan akun google adsense yang sama? apa bisa?
Sekarang periksa template blog sobat dan lihat rating bintang yang sudah terpasang didalam blog. Gimana? keren kan hehehe. Dan saya yakin pengunjung di blog sobat akan senang melihatnya. Secara keseluruhan itu akan meningkatkan dampak positif pada situs blog sobat. Terima kasih.
Tampilkan Komentar


EmoticonEmoticon