How to Make Star Ratings in Blog with Font Awesome

FacebookTwitterGoogle+
Languange
Halo sobat, kali ini saya akan membahas cara membuat rating bintang di post, ide ini saya dapatkan ketika membaca tutorial dari arlina tentang popular post dengan efek rating. saya berpikir rating ini bisa digunakan tidak hanya dipopular post melainkan di post juga.

Sehingga saya membuatnya dan berhasil saya praktekkan di template saya MizuManga Blogger Template.

nah bagi sobat tertarik dan ingin mencobanya silahkan ikuti tutorial dibawah :)

Cara Membuat Rating Bintang di Post dengan Font Awesome

1. Masuk ke Blogger
2. Blogmu Template Edit HTML
3. Tambahkan kode CSS dibawah ini tepat diatas ]]></b:skin> atau </style>
/* Rate Star */
.us:before{font-family:FontAwesome;display:inline-block;color:#f39c12;font-style:normal;font-size:15px;padding:0;font-weight:400;line-height:normal;transition:all .3s;letter-spacing:1px}
.us:hover:before{opacity:1}
.us-five:before{content:'\f005\f005\f005\f005\f005'}
.us-four:before{content:'\f005\f005\f005\f005\f006';opacity:.9}
.us-three:before{content:'\f005\f005\f005\f006\f006';opacity:.85}
.us-two:before{content:'\f005\f005\f006\f006\f006';opacity:.8}
.us-one:before{content:'\f005\f006\f006\f006\f006';opacity:.75}

4. Simpan Template

Cara Memunculkan Rating

Rate 1 Bintang

<i class='us us-one'></i>

Rate 2 Bintang

<i class='us us-two'></i>

Rate 3 Bintang

<i class='us us-three'></i>

Rate 4 Bintang

<i class='us us-four'></i>

Rate 5 Bintang

<i class='us us-five'></i>

hi, this time I will discuss how to make a star rating on a blog, this idea I can when reading the tutorial from Arlina about popular post effects rating. and i'm not forget to make a version of RTL.

I also installed star rate on my template MizuManga Blogger Template .

If you are interested please note the tutorial below.

How to Make Star Rate with FontAwesome

1. Sign in to Blogger
2. Your Blog Template Edit HTML
3. Add the following CSS code just above ]]></b:skin> or </style>
/* Rate Star */
.us:before{font-family:FontAwesome;display:inline-block;color:#f39c12;font-style:normal;font-size:15px;padding:0;font-weight:400;line-height:normal;transition:all .3s;letter-spacing:1px}
.us:hover:before{opacity:1}
.us-five:before{content:'\f005\f005\f005\f005\f005'}
.us-four:before{content:'\f005\f005\f005\f005\f006';opacity:.9}
.us-three:before{content:'\f005\f005\f005\f006\f006';opacity:.85}
.us-two:before{content:'\f005\f005\f006\f006\f006';opacity:.8}
.us-one:before{content:'\f005\f006\f006\f006\f006';opacity:.75}
For RTL BLOG
/* Rate Star RTL */
.us:before{font-family:FontAwesome;display:inline-block;color:#f39c12;font-style:normal;font-size:15px;padding:0;font-weight:400;line-height:normal;transition:all .3s;letter-spacing:1px}
.us:hover:before{opacity:1}
.us-five:before{content:'\f005\f005\f005\f005\f005'}
.us-four:before{content:'\f006\f005\f005\f005\f005';opacity:.9}
.us-three:before{content:'\f006\f006\f005\f005\f005';opacity:.85}
.us-two:before{content:'\f006\f006\f006\f005\f005';opacity:.8}
.us-one:before{content:'\f006\f006\f006\f006\f005';opacity:.75}
4. Save Template

How to Use Rating

Rate One Star

<i class='us us-one'></i>

Rate Two Star

<i class='us us-two'></i>

Rate Three Star

<i class='us us-three'></i>

Rate Four Star

<i class='us us-four'></i>

Rate Five Star

<i class='us us-five'></i>

Rekomendasi tutorial lain

Comment Now

14 comments

      • avatarAnonymous says:

        Removed your credits! Are you going to allow that. I hate when people steal someones work. This one removed it. http://www.escapegamesdaily.com/

          • avatarTutorial Ku says:

            ._. sebelumnya agan mau pake nih buat dibagian mana??
            menurut ane ini tutor cocok buat post info anime ._.\
            seperti ini
            http://mizumanga10.blogspot.co.id/2016/11/yuri-on-ice.html