Cara Menambahkan Rating Bintang di Postingan Blogger

Ternyata rating yang ada di postingan blogger itu sangat berpengaruh terhadap tingkat kepercayaan dari Google. Selain menambah kesan lebih keren, rating di postingan blog juga akan menaikkan SEO (Search Engine Optimization) di mesin pencarian Google.

Cara Menambahkan Rating Bintang di Postingan Blogger

Berhubung rating di postingan blog tidak disediakan secara khusus oleh Blogger. Oleh sebab itu, pada tutorial kali ini Namina akan menggunakan widget yang disediakan oleh pihak ketiga untuk memasang rating di postingan blogger.

Penasaran bagaimana Cara Menambahkan Rating Bintang di Postingan Blogger? Mari kita simak caranya di bawah ini.

Cara Menambahkan Rating Bintang di Postingan Blogger


Rating Widget merupakan salah satu penyedia gadget rating di blog yang memiliki tampilan widget rating yang kompak secara gratis. Untuk menambahkan rating dengan Rating Widget silakan ikuti langkah-langkah berikut ini :

Pertama, signup terlebih dahulu di situs Rating Widget dan buka inbox email untuk memverifikasi akun Rating Widget.

Selanjutnya, buka menu Rating di http://rating-widget.com/get/rating/, kemudian kustomisasi tampilan dari widget rating sesuai kebutuhan

Cara Menambahkan Rating Bintang di Postingan Blogger

Setelah selesai dikustomisasi, salin kode pada menu bagian kanan tepat sebelum kode penutup body </body> dan tambahkan ke dalam blogger. Contohnya kode ini :

<script type="text/javascript">(function(d, t, e, m){
    
    // Async Rating-Widget initialization.
    window.RW_Async_Init = function(){
                
        RW.init({
            huid: "415011",
            uid: "27f083ab12c4b82e452ba95052cb40ba",
            source: "website",
            options: {
                "style": "oxygen",
                "isDummy": false
            } 
        });
        RW.render();
    };
        // Append Rating-Widget JavaScript library.
    var rw, s = d.getElementsByTagName(e)[0], id = "rw-js",
        l = d.location, ck = "Y" + t.getFullYear() + 
        "M" + t.getMonth() + "D" + t.getDate(), p = l.protocol,
        f = ((l.search.indexOf("DBG=") > -1) ? "" : ".min"),
        a = ("https:" == p ? "secure." + m + "js/" : "js." + m);
    if (d.getElementById(id)) return;              
    rw = d.createElement(e);
    rw.id = id; rw.async = true; rw.type = "text/javascript";
    rw.src = p + "//" + a + "external" + f + ".js?ck=" + ck;
    s.parentNode.insertBefore(rw, s);
    }(document, new Date(), "script", "rating-widget.com/"));</script>

Agar kode lebih rapi, di sini saya minimize jadi seperti ini

<script type='text/javascript'>
//<![CDATA[
!function(e,t,n,i){window.RW_Async_Init=function(){RW.init({huid:"415011",uid:"27f083ab12c4b82e452ba95052cb40ba",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 ditandai dengan kode ID Rating Widget blog Anda.

Selanjutnya tambahkan kode HTML di bawah ini sebelum kode <data:post.body/> untuk posisi di atas atau setelah <data:post.body/> untuk posisi di bawah setelah isi artikel

Terdapat beberapa kode data:post.body pada template (Biasanya ada 3) tambahkan kode ini sebelum kode data:post.body yang dibungkus tag kondisional halaman post

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

Biar lebih rapi, tambahkan kode CSS ini sebelum </head>

<style type='text/css'>
.rw-ui-wrap {margin:0 auto 20px auto}
</style>

Selesai, klik tombol Simpan tema dan lihat hasilnya di blog Anda.


Cukup mudah bukan? Itulah Cara Menambahkan Rating Bintang di Postingan Blogger. Semoga bermanfaat.

Related Posts

Load comments

Comments