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. 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.
#1. Masuk ke blogger.
#2. Pilih menu tema.
#4. Copy dan pastekan kode dibawah ini di atas <head>
#5. Dan klik tombol simpan template.
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.
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.
<link href='//netdna.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>3. Cara Memasang Rating Bintang di Blog dengan Warna Biru
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.
#3. Copy dan pastekan kode dibawah sebelum/atas ]]></b:skin>
/* Popular Post with Blue Star Rating by http://www.monitasaki.com/ */4. Cara Memasang Rating Bintang di Blog dengan Warna Kuning
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.
#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}#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.
Mas Galih
Dapatkan Tips Menarik Setiap Harinya!
- Dapatkan tips dan trik yang belum pernah kamu tau sebelumnya
- Jadilah orang pertama yang mengetahui hal-hal baru di dunia teknologi
- Dapatkan Ebook Gratis: Cara Dapat 200 Juta / bulan dari AdSense
0 Response to "Cara Membuat Rating Bintang di Setiap Artikel Blog"
Post a Comment
Catatan Untuk Para Jejaker