Widget Star Rating Post NextWapBlog Berdasarkan Views

Whidie ID 31 Jan 2018 - 13:26 8 Komentar
thumbnail

Siang sob :biggrin: pada kesempatan kali ini, saya akan membagikan sebuah widget untuk platform NextWapBlog. Yaps! widget ini berjenis star rating, tapi system ratingnya bukan atas penilaian pembaca tapi berdasarkan jumlah tampilan suatu post.

Meskipun begitu sob, lumayanlah buat jadi hiasan blog kita agar terlihat keren & cantik :redface:. Untuk demo widgetnya, sobat bisa lihat diatas (bawah judul postingan) atau di post list (beranda) ya itulah contoh hasilnya sob :mrgreen:.

Widget ini saya buat menggunakan :
- JavaScript sebagai pengolah data.
- TwigCode sebagai penginput data.
- Font Awesome sebagai output data berupa bintang. Tapi sobat juga bisa menggantinya dengan tulisan atau gambar.

Kode :

Script By Whidie ID
<script type="text/javascript">
/* Memasukan jumlah views melalui twig code ke variabel javascript */ var x = {{ post.hits_total }};

/* Mengolah data (view) menjadi rating berdasarkan nilai yang telah ditentukan */ if (x=>100 && x<250) {
document.write('
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
');
}

else if (x>=250 && x<500) {
document.write('
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
');
}

else if (x>=500 && x<1000) {
document.write('
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
');
}

else if (x>=1000 && x<2500) {
document.write('
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
; <i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-o"></i>
');
}

else if (x>=2500) {
document.write('
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
');
}

else {
document.write('
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
<i class="fa fa-star-o"></i>
');
}

</script>

Angka diatas dapat kamu ganti sesuka hati sob :biggrin: dan silahkan pastekan di home.html atau di post.html yak sob.

Sekian untuk postingan kali ini, semoga widgetnya bermanfaat yak :mrgreen:

/script

Komentar

8 Tanggapan dari "Widget Star Rating Post NextWapBlog Berdasarkan Views"

Komentar baru











Please refresh...

Smiley