Sebelum nie memang dah banyak kali jumpa blogger² yang menggunakan kotak komen Facebook (FB) pada blog mereka. Bagi aku, penggunaan kotak komen FB tu memang la menarik. Tapi yang lecehnya, tak semua blogger² gemar nak komen kat situ. Lain la kalau ada kedua²nya sekali macamtutorial kotak komen Facebook dan Blogger yang aku nak buat ni. Kalau nak komen, kat mana² satu pun boleh. Pilih je mana yang nak.
INFO : Bagi yang dah ada kotak komen Facebook sebelum ini. Sila remove dulu kotak tersebut sebelum apply tutorial ini.
Cara² nak memasang kotak komen Facebook dan Blogger ni.
1. Mula² sekali. Kena login Blogger.com dulu.
2. Kemudian klik pada bahagian Design > Edit HTML
3. Lepas tu, tick pada Expend widget templates
4. Untuk mengelak sebarang kesilapan semasa memasang code ini, sila Download Full Templates sebagai langkah keselamatan. Nanti kalau tak jadi. Hanya perlu Upload semula fail tersebut dan template anda akan kembali menjadi seperti asal semula.
5. Seterusnya, tekan CTRL+F (Find) untuk mencari code ini div class='comments' id='comments'>
6. Dah jumpa tu, sila copy code di bawah ni,
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
menjadi seperti begini;
<div class='comments' id='comments'>
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' title='Comments made with Facebook'>
<img class='comments-tab-icon' src='http://static.ak.fbcdn.net/rsrc.php/v1/yH/r/eIpbnVKI9lR.png'/>
<fb:comments-count expr:href='data:post.url'/> Comments
</div>
<div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle("#blogger-comments");' title='Comments from Blogger'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div><div class='clear'/>
</div>
<div class='comments-page' id='fb-comments-page'>
<b:if cond='data:blog.pageType == "item"'>
<div id='fb-root'/>
<fb:comments expr:href='data:post.url' num_posts='2' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
*num_posts='2' = Nilai 2 adalah jumlah komen yang akan terpapar secara default pada kotak komen FB dibawah. Macam sekarang ni, saya dah tukar kepada 5.
*width='400' = saiz kotak komen Facebook. Kat sini anda boleh adjust saiz tersebut mengikut saiz blog masing².
7. Langkah seterusnya, tekan CTRL+F (Find) untuk cari code ini, <head>
8. Pastekan code di bawah ini, selepas code tersebut (Langkah 7) .
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='YOUR_FB_ID' property='fb:admins'/>
<script type='text/javascript'>
function commentToggle(selectTab) {
$(".comments-tab").addClass("inactive-select-tab");
$(selectTab).removeClass("inactive-select-tab");
$(".comments-page").hide();
$(selectTab + "-page").show();
}
</script>
9. Selepas itu, sila pastikan anda telah menukarkan YOUR_FB_ID dengan ID Facebook anda tersendiri. Kalau tak tahu macam mana nak cari ID tu. Buka Facebook anda dan tengok URL macam contoh ini; http://www.facebook.com/profile.php?id=1519803763. Haahhh .. yang hujung sekali tu la ID Facebook anda . Macam sekarang ini, ID saya adalah 1519803763.
OK, sekarang dah habis bahagian edit HTML. Seterusnya adalah langkah memasukkan code di dalam bahagian CSS pula.
10. Klik pada bahagian Design > Template Designer > Advanced > Add CSS
11. Copy code dibawah ini dan paste di dalam kotak CSS tersebut.
.comments-page { background-color: #f2f2f2;}
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #d1d1d1;}
INFO :
Bagi blogger² yang menggunakan text warna putih, sila pastikan anda menukarkan warna backround kotak komen
.comments-page { background-color: #f2f2f2;}
dengan warna lain selain hitam dan putih. Tujuannya, untuk elak warna tulisan pada ruang komen tenggelam dalam warna backgroud. Contohnya; warna ini; #B9CACA. Kalau tak bersesuaian, sila gunakan code warna yang lain. 12. Lepas tu Save. Habisss !
p/s: Jika ada sebarang persoalan atau tak berjaya untuk apply tutorial ini di dalam blog anda. Sila emailkan kepada saya melalui email, anastasyea@gmail.com dan saya sedia membantu. (",)
sumber
0 Comments
 pada blog mereka. Bagi aku, penggunaan kotak ...){kind=link}