Cara Memasang Facebook Like Dengan Kotak (Box) Pada Postingan

Kemarin ECAZA salah satu pengunjung blog ini bertanya tentang bagaimana cara membuat facebook like seperti yang ada pada blog ini? Sebenarnya sudah banyak blog lain yang share, tapi kebanyakkan widget facebook like yang mereka pasang sangat monoton. Nah... agar terlihat berbeda, saya memasang BOX pada widget fb like saya. Contohnya bisa anda lihat pada bagian bawah artikel ini, atau bisa langsung anda lihat pada gambar di bawah.

Tombol Facebook like sangat bermanfaat untuk menunjukkan seberapa banyak pengunjung yang menyukai blog kita. Selain itu, jika mereka menyukai artikel kta dengan mengklik tombol like fb ini, maka artikel kita akan nampang di dinding facebook mereka dan tentu saja akan banyak penghuni facebook yang ikut membacanya.

Lalu bagaimana cara memasangnya? Ikuti langkah-langkah dibawah ini:

1. Langsung masuk ke dasbor blogger anda. Dan menuju Rancangan > Edit HTML. Jangan lupa mencentang “Expand Widget Templates” .
2. Cari kode  ]]></b:skin>  (Gunakan Ctrl+F) lalu ganti kode tersebut dengan kode di bawah ini.

.fb_like_box {
margin-top:10px;
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background-color:#3B5999;
border:3px solid #2B2B2B;
margin-bottom:10px;
padding:10px 7px;
width:474px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDbp0O0KnUR8qMGdxNHsXIKvy6TDX8pLtCzKkTepfR-WkKfkMMWUUBUHY1dUb4L_IjJO3vFVKtaO2wxXfmeXjoQi2rWA08B4N3tLlJ2vAeQcyaEiAFy-xbhak9rIl9VR38C7QZFRiz4E/s1600/fblogo2.jpg") no-repeat scroll left top transparent;
}
.fb_like_button_holder {
-moz-border-radius:10px 10px 10px 10px;
border-radius:10px;
background:none repeat scroll 0 0 #FFFFFF;
padding:12px 12px 0 12px;
width:449px;
height:42px;
}
]]></b:skin>

Keterangan:
1. Pada angka 474 berwarna merah di atas adalah ukuran untuk lebar box widget fb like (sesuaikan dengan lebar kolom postingan anda). Sedangkan URL berwarna biru adalah URL dari box-nya. Untuk mendapatkan hasil yang sesuai, anda harus menyesuaikan antara ukuran dengan URLnya. berikut penyesuaiannya:

•  400 s/d 474 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDbp0O0KnUR8qMGdxNHsXIKvy6TDX8pLtCzKkTepfR-WkKfkMMWUUBUHY1dUb4L_IjJO3vFVKtaO2wxXfmeXjoQi2rWA08B4N3tLlJ2vAeQcyaEiAFy-xbhak9rIl9VR38C7QZFRiz4E/s1600/fblogo2.jpg
• 475 s/d 600 = https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihBA8MnFKgnQKIlaIoLj9QKqw2IL1ozQT4MnCHLqntXuaO1oMIePZHu-NXrlv_mTfzAFjhC1p2hPR94TzKamV-vIM8zpUs8X4q0NVBw1L8k9As5vFq94D-FkygWeqdvCMfm3zX0wWTXUg/ 

Jadi jika ukuran yang anda masukkan adalah 450, maka URL yang digunakan adalah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVDbp0O0KnUR8qMGdxNHsXIKvy6TDX8pLtCzKkTepfR-WkKfkMMWUUBUHY1dUb4L_IjJO3vFVKtaO2wxXfmeXjoQi2rWA08B4N3tLlJ2vAeQcyaEiAFy-xbhak9rIl9VR38C7QZFRiz4E/s1600/fblogo2.jpg

2. Lebar harus di antara 400 s/d 600. Jangan sampai lebih atau kurang 

2. Sekarang cari kode <data:post.body/> lalu ganti kode tersebut dengan kode di bawah ini.

<data:post.body/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='fb_like_box'>
<div class='fb_like_top'><a rel='nofollow' href='http://www.facebook.com/kanguchiha'>Be a Fan</a></div>
<div class='fb_like_button_holder'>
<iframe allowTransparency='true' expr:src='&quot;http://www.facebook.com/plugins/like.php?href=&quot; + data:post.url + &quot;&amp;layout=standard&amp;show_faces=false&amp;width=100&amp;action=like&amp;font=arial&amp;colorscheme=light&quot;' frameborder='0' scrolling='no' style='border:none; overflow:hidden; width:450px;height:30px;'/>
</div>
</div>
</b:if>

Keterangan:
Ganti URL berwarna Hijau dengan URL Profil Facebook anda

5. Sekarang simpan template anda. Lalu lihat hasilnya pada halaman anda (buka salah satu artikel pada blog anda). Bagaimana? suka dengan hasilnya? Selamat mencoba...

Oiya, satu lagi. Jika anda suka dengan setiap artikel saya, jangan lupa untuk menekan tombol like di bawahnya ya... :) Selamat tahun baru 2011