Butang Like Facebook Blogger baru

Disclaimer: Tutorial ni nak dibuat seringkas yang mungkin tapi peringatan untuk rakan-rakan yang membaca, jangan sesekali copy tutorial ni lepas tu letak dekat website sendiri. paling busuk pun, sila letak credits di bahagian atas sekali entry ciplak anda. Penat-penat aku nak memahamkan dari Facebook, buat entry tiba-tiba page result Google dapat mukasurat 3.

Okay jom kita banding dulu Butang Like Lama. Kita boleh nampak yang option untuk like tu tak berapa jelas dan agak kabur. Kadang-kadang orang tak nampak pun cara nak tekan like tu.

Dan mari kita bandingkan dengan yang baru pulak yang lebih jelas, cun-melecun, dan dilengkapi dengan link ke fanpage anda sendiri! Kalau takde fanpage, anda link aje ke fan(friendpage) arc13 atau kemana-mana fanpage yang anda sukalah.

Resipi membuat butang like yang anggun seperti di atas selepas save template anda dan membuang butang like lama ialah:

1. Masuk Blogger>Dashboard>Design>Edit HTML dan "tick" pada Expand Widget Template

2. Cari ]]></b:skin> dan paste betul-betul di atasnya (above) kod 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:540px;
}
.fb_like_top {
overflow:visible;
padding:0;margin:0 0 5px;
width:349px;
height:24px;
background:url("http://lh5.ggpht.com/_u4gySN2ZgqE/TJ3dpjy9PaI/AAAAAAAABr0/PTUXIS8ykps/fblogo%5B3%5D.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:515px;
height:42px;
}

P/S: Kod berwarna merah merujuk kepada saiz kotak. Tukar sesedap rasa anda
so akan jadi macam ni

3. Cari <data:post.body/> pulak dan  paste betul-betul dibawahnya (below) kod ini

<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/arcx13'>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>

Sila gantikan kod berwarna merah dengan page kegemaran anda. Tapi kalau nak biarkan pun lagi bagus. Sayang banyak-banyak kat sesiapa yang biarkan kod oren tu tak bertukar.

So akan jadi macam ni

Sila pastikan anda paste kod kedua (kalau ada 2 lah) selepas <data:post.body/> yang kedua seperti dalam gambarajah di atas. Setakat ni tu je dapat tolong. Busy final exam

4. Tak payah banyak cerita, SAVE. Dan lihatlah hasilnya dibawah. Kalau anda rasa anda comel sila klik kedua-dua butang.