Membuat Rate Widget Pada Blog

Hello sobat blogger semua, apa kabar kalian di awal tahun ini !! Tentu dengan penuh semangat baru ! Setelah beberapa lama pusing memikirkan postingan, akhirnya saya kembali memutuskan untuk memposting tutorial yang nantinya berguna dan bisa anda gunakan !!! Tutor saya kali ini yaitu tentang bagaimana cara membuat Rate Widget !!!

Apa sih fungsi dari Rate Widget tersebut ? Bagi yang belum tahu, mungkin menganggap bahwa rate widget tidak begitu penting. Berikut definisinya, Rate widget yaitu Suatu penilaian dari pembaca untuk penulis yang bertujuan sebagai pemberian masukan serta motivasi untuk berbuat lebih baik lagi !!!


Ok, Mari Kita Mulai Tutornya !!!

- Pertama - tama download code JS ini :  download.
  Lalu buka file tersebut dan Upload ke Webhosting anda !!!
- Atau anda juga bisa menggunakan file Js saya : http://khamardos.blackapplehost.com/rate.js

Setelah itu yang harus dilakukan adalah
1. Login pada Blogger
2. Masuk ke bagian Layout, kemudian ke bagian Edit HTML
    Back up Template dengan cara Mengklik : Download Template Lengkap
    Setelah itu, beri tanda cek pada Expand Widget Templates.

Bagi Anda Yang Tidak Menggunakan Readmore
Sekarang cari code berikut, dengan menggunakan Ctrl + F.

<data:post.body/>

Apabila anda temukan code tersebut hanya satu dan tidak bergabung dengan code lain, maka anda dapat menambahkan code ini dibawah code tersebut :

<script language='JavaScript'>
var OutbrainPermaLink="<data:post.url/>";
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='URL rate.js' type='text/javascript'/>

Bagi Anda Yang  Menggunakan Readmore
Jika anda menggunakan autoreadmore / readmore, maka anda akan menemukan script dibawah :

<div id="'"><data:post.body/></div><br /><script type="'text/javascript'">createSummaryAndThumb("summary<data:post.id/>");</script><br /><span class="'rmlink'" style="'float:right;padding-top:20px;'"><a href="'data:post.url'"> Read More</a></span><br /><br /></b:if><br /><b:if cond="'data:blog.pageType"><data:post.body/></b:if><br /> <div style="'clear:"> <!-- clear for photos floats --><br /> </div><br />

Jika anda menggunakan autoreadmore seperti itu, berarti anda harus membuat BOX dimana Rate Widgets tersebut akan ditempatkan. Pembuatan BOX tersebut menggunakan CSS, berikut adalah code CSS nya.

.rate {
background: #202020;
float: left;
text-align:center;
width: 569px;
height:?px;
margin: 0px auto 10px;
padding: 10px;
border: 1px solid #363636;
}

Code yang saya tandai dengan warna merah, dapat diganti sesuai keinginan kita. Tempatkan code - code berikut diatas code :

]]></b:skin>

Setelah itu, carilah code :

<b:includable id="'comments'" var="'post'"><br />

Tempatkan code ini tepat dibawahnya :

<script language='JavaScript'>
var OutbrainPermaLink="<data:post.url/>";
var OB_demoMode = false;
var OB_Script = true;
</script>
<script src='URL rate.js' type='text/javascript'/>

Note :

Gantilah URL rate.js sesuai dengan file rate.js yang telah anda upload tadi.
Atau anda juga bisa menggunakan file Js saya : http://khamardos.blackapplehost.com/rate.js

Sekarang Save Template.

Bagaimana ? Sudah Berhasil ?
Rate widget tersebut akan memberi penilaian terhadap artikel anda !!! HAPPY BLOGGING SOB !!!

Bagikan Jika Artikel ini menarik, Diharapkan agar memberikannya kepada teman2 anda di Facebook

Artikel Lainnya :