Lompat ke konten Lompat ke sidebar Lompat ke footer

Widget HTML Atas

Cara Membuat Rating Bintang Didalam Postingan Artikel Blog

Rating bintang yang ada pada setiap postingan artikel blog ternyata sangat berpengaruh terhadap hasil pencarian google. Semakin orang lain banyak memeberi rating bintang, maka semakin bagus juga kualitas postingan artikel dalam blog kita. Dan tentunya artikel kita akan semakin berpengaruh terhadap hasil pencarian google dan dan kemungkinan akan menduduki page One di hasil pencarian. Ya mudah-mudah sih :v

Membuat Rating Bintang Di Blog - Kored ID

Namun sayangnya platform blogger tidak meneydiakan fitur ini secara khusus. dibutuhkan widget pihak ketiga untuk memasang rating bintang pada setiap artikel di blog kita. Meskipun Blogger tidak menyediakannya, akan tetapi ada cara lain untuk memasang rating bintang pada setiap artikel yang kita posting. Yaitu dengan menggunakan widget dari pihak ketiga. Dan situ penyedia Widget ini bernama Rating Widget, Rating Widget merupakan situs penyedia untuk memasang rating bintang pada blogger Wordpress dan platform-platform lainnya.

Meskipun cara membuatnya terbilang rumit dan sedikit susah (menurut saya ya) tapi kalau kita benar-benar mengikuti langkah-langkahnya dengan teliti dan benar, Maka cara ini akan berhasil diterapkan kedalam blog kita. Untuk itu, simak dengan baik Langkah-langkah Membuat Rating Bintang didalam Postingan Blog,

Baca Juga :
Cara Menambahkan Rating Bintang Di setiap Artikel Blog

1. Silahkan daftar dahulu di http://rating-widget.com dan Vertify Emailnya
2. Setelah itu, Klik Get My Free Widget -> Pilih Platform Blogger Atau Bisa juga kunjungi http://rating-widget.com/get/rating
3. Selanjutnya, Silahkan kustomisasi Tampilan dari Widget Rating sesuai keinginan
Membuat Rating Bintang Di Blog - Kored ID

Keterangan:
  • Styles : Untuk Mengatur jenis widget yang akan di tampilkan didalam blog, Silahkan pilih sesuai selera
  • Theme And Colors : Untuk Mengatur warna Rating bintang, Selain itu kita bisa menyesuikan besar kecilnya Rating bintang
  • Language And Font : Untuk mengatur bahasa, jenis huruf/ font
  • Label : Untuk mengatur posisi atau letak rating bintang dan text di samping bintang
  • Starts : Tampilan Standar bintang yang akan tampil di dalam postingan blog Pilih saja 5 Bintang
  • Custom Text : Untuk mengatur Text keterangan jika ada orang memberi rating
4. Jika sudah selesai mengaturnya, Pilih Show Source Code -> Salin kode.
Jika kalian tidak menemukan pilihan Show Source Code, berarti kalian belum login atau membuat akun
Membuat Rating Bintang Di Blog - Kored ID

Baca Juga :
Cara Memasang ke Dalam Blog

1. Seperti biasa login Blogger.com
2. Pilih Tema -> Edit HTML
3. Cari kode </body> (Gunakan ctrl+f Untuk Mencarinya)
4. Tambahkan Kode tadi Sebelum kode </body> . dan kode nya seperti dibawah ini

<script type="text/javascript">(function(d, t, e, m){
    window._rws = window._rws || [{
        huid: "427399",
        uid: "f08efd108a79e40cb13c529cf52a00b4",
        source: "blogger",
        options: {
            "size": "medium",
            "style": "oxygen",
            "isDummy": false
        } 
    }];

        
    // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-blogger-js",
        p = d.location.protocol, a = ("https:" == p ? "secure." + 
        m + "js/platform/" : "js." + m + "platform/"), 
        ck = "Y" + t.getFullYear() + "M" + t.getMonth() + "D" + t.getDate();
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "blogger.js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
}(document, new Date(), "script", "rating-widget.com/"));</script>

Supaya Kodenya terlihat Rapi, Silahkan gunakan kode dibawah ini:
<script type='text/javascript'>
//<![CDATA[
!function(e,t,n,i){window.RW_Async_Init=function(){RW.init({huid:"427399",uid:"f08efd108a79e40cb13c529cf52a00b4",source:"website",options:{style:"oxygen",isDummy:!1}}),RW.render()};var s,a=e.getElementsByTagName(n)[0],c="rw-js",r=e.location,o="Y"+t.getFullYear()+"M"+t.getMonth()+"D"+t.getDate(),d=r.protocol,g=r.search.indexOf("DBG=")>-1?"":".min",l="https:"==d?"secure."+i+"js/":"js."+i;e.getElementById(c)||((s=e.createElement(n)).id=c,s.async=!0,s.type="text/javascript",s.src=d+"//"+l+"external"+g+".js?ck="+o,a.parentNode.insertBefore(s,a))}(document,new Date,"script","rating-widget.com/");
//]]>
</script>

Ganti Pada bagian yang sudah diberi tanda merah (huid dan Uid) dengan kode ID yang terdapat dari Akun Rating Widget Anda.

5. Langkah Selanjutnya, tambahkan kode HTML dibawah ini sebelum <data:post.body/> untuk posisi rating di atas artikel Atau Setelah kode <data:post.body/> Untuk posisi rating dibawah postingan artikel

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class="rw-ui-wrap">
<div class="rw-ui-container"></div>
</div>
</b:if>

Jika terdapat tiga kode <data:post.body/> pada template, Maka tambahkan kode <data:post.body/> yang di bungkus oleh tag kondisional Halaman Post, Lihat gambar dibawah
Membuat Rating Bintang Di Blog - Kored ID

6. Supaya Enak dilhat dan rapi, Silahkan tambahkan kode CSS dibawah ini sebelum kode </head>
<style type='text/css'>

.rw-ui-wrap {margin:0 auto 20px auto}
</style>

7. Simpan Tema, dan Selesai

Baca Juga : 
Itulah Cara Membuat Rating Bintang Didalam Postingan Artikel Blog, Pembuatanya memang sedikit rumit namun menurut saya hasil yang didapat memang lumayan memuaskan, blog kita akan terlihat seperti blog profesional. Semoga bisa diterapkan didalam blog kalian. Dan terimakasih sudah berkunjung.