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 :

Tutorial Blog

• Menampilkan / Menyembunyikan Sidebar Blog
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tampilan Halaman Label Hanya Judul Postingan
• Tutorial Membuat S3slider Images Show
• Memasang Tombol Google +1 di Blogspot
• Membuat Recent Post With Thumbnails
• Membuat Intro Page Pada Blogspot
• Membuat Tab View Pada Blogspot
• Kode Warna HTML
• Combine Show Hide Sidebar with Tooltips
• Navigasi Breadcrumb Pada Postingan Blog
• Membuat Tooltips Pada Sebuah Objek
• Membuat Menu Navigasi Dengan Tooltips
• Membuat Page Peel Effect Pada Blogger
• Related Post With Scrool Function
• Pesan Kamu Di Atas "Poskan Komentar's Box"
• Membuat Form Komentar Admin

Tip n Trik

• Menampilkan Akun Google Plus Di SERP Google
• Tips Mempersingkat Alamat URL Akun Google Plus
• Hubungkan Google Plus dengan Facebook | Twitter
• Menghubungkan Google Plus ke FB dan Twitter
• Twitteran Di Dashboard Akun Google Plus
• Cara Download Semua Album Foto di Facebook
• Tips Cara Mendapatkan Sitelink Google
• Membuat Sebuah Link Mengarah Ke Lebih 2 URL
• Show Hide Chatbox Efek Jquery di Sidebar Blog
• Maksud Pesan Error Saat Mengakses Internet
• Merubah Kotak Chat Facebook ke Versi Lama
• Memasang Simple Menu Navigasi Horizontal
• Memasang Floating Share Button
• Googlebot Access Blog Bermasalah
• Tag H1 Untuk Judul Postingan dan Judul Blog
• Mempercepat IDM Menggunakan IDM Optimizer
• Memasang Hidden Chatbox With Jquery Di Sidebar
• Memasang Hidden Chatbox Pada Sidebar Blog
• Memasang Sticky Tooltips Di Blogspot
• Tingkatkan Traffic Blog Lewat VLog | VIVANews
• Tampilan Halaman Label Hanya Judul Postingan
• Cara Transfer Foto Dari Facebook Ke Google+
• Tips SEO Terbaru di Tahun 2011
• Tutorial Membuat S3slider Images Show
• Akhirnya, Bisa Juga Join Ke Google+