Cara Memasang Facebook Like Dengan Kotak (Box) Pada Postingan

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/AVvXsEgdaSMsZs_GZ6VNewqZGn4YGZ6W2Y8trLUB0gnvgTvys1xTOIPw7zPocNYH2hzNvSgsaIoSg3SOI91Uexh73V3jBRdKA6rwRKPpepfWS_vFL7LKBnztPQdpF6pyIwSE6pDucb7Rhwb1qBI/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/AVvXsEgdaSMsZs_GZ6VNewqZGn4YGZ6W2Y8trLUB0gnvgTvys1xTOIPw7zPocNYH2hzNvSgsaIoSg3SOI91Uexh73V3jBRdKA6rwRKPpepfWS_vFL7LKBnztPQdpF6pyIwSE6pDucb7Rhwb1qBI/s1600/fblogo2.jpg
• 475 s/d 600 = http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.jpg 

Jadi jika ukuran yang anda masukkan adalah 450, maka URL yang digunakan adalah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgdaSMsZs_GZ6VNewqZGn4YGZ6W2Y8trLUB0gnvgTvys1xTOIPw7zPocNYH2hzNvSgsaIoSg3SOI91Uexh73V3jBRdKA6rwRKPpepfWS_vFL7LKBnztPQdpF6pyIwSE6pDucb7Rhwb1qBI/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/Aanprawira'>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? anda suka dengan hasilnya?
Selamat mencoba...!!!!


http://bloggertouch.appspot.com