Cara Letak Kotak Komen Facebook di blog
Note : Entry ni dibuat sebagai penambah baik
Note : Entry ni dibuat sebagai penambah baik
entry tutorial sebelum ni
So, Kepada yang dah ada letak kotak komen facebook
dan ingin mencuba tutorial ini pula,
sila buang semua code FB comments yang sedia ada.
Cara-cara letak kotak komen Facebook di blog:
1. Pergi ke bahagian Design > Edit HTML
2. Tick atau tanda pada Expend widget templates
3. Kemudian tekan CTRL+F (Find) untuk mencari code ini < div class='comments' id='comments'>
4. Copy code di bawah ni dan paste kan selepas perkataan < div class='comments' id='comments'> yang korang jumpa tadi.
*num_posts='5' = Nilai 5 merupakan jumlah komen yang akan terpapar secara default pada kotak komen FB
*width='400' = Ini merupakan saiz kotak komen untuk Facebook comments box. Korang boleh adjust saiz tersebut mengikut kesesuaian blog masing-masing.
Tekan CTRL+F (Find) untuk cari code <head> , Kemudian Copy dan Pastekan code di bawah ini, selepas code tersebut (<head>) .
Note : Pastikan korang menukarkan YOUR_FB_ID dengan ID Facebook korang tersendiri. Korang boleh dapatkan ID Facebook korang dengan cara Sign In ke Facebook korang dan tengok URL di bahgian profile macam contoh ini; http://www.facebook.com/profile.php?id=1234567890. Nombor yang dihujung sekali tu la merupakan ID facebook korang, cam dalam contoh tu 1234567890 merupakan ID Facebook yang diperlukan untuk tutorial ini.
6. Copy dan paste code dibawah ke bahagian CSS atau Edit HTML
Untuk step ini ada 2 cara yang korang boleh buat
Cara-cara letak kotak komen Facebook di blog:
1. Pergi ke bahagian Design > Edit HTML
2. Tick atau tanda pada Expend widget templates
Note : Sila Download Full Templates terlebih dahulu sebagai langkah keselamatan.
3. Kemudian tekan CTRL+F (Find) untuk mencari code ini < div class='comments' id='comments'>
4. Copy code di bawah ni dan paste kan selepas perkataan < div class='comments' id='comments'> yang korang jumpa tadi.
<div class='comments-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='comments-tab inactive-select-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='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='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<img class='comments-tab-icon' src='http://www.blogger.com/img/icon_logo32.gif'/> <data:post.numComments/> Comments
</div>
<div class='comments-tab inactive-select-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='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='5' width='400'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
*num_posts='5' = Nilai 5 merupakan jumlah komen yang akan terpapar secara default pada kotak komen FB
*width='400' = Ini merupakan saiz kotak komen untuk Facebook comments box. Korang boleh adjust saiz tersebut mengikut kesesuaian blog masing-masing.
Tekan CTRL+F (Find) untuk cari code <head> , Kemudian Copy dan Pastekan code di bawah ini, selepas code tersebut (<head>) .
<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>
<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>
Note : Pastikan korang menukarkan YOUR_FB_ID dengan ID Facebook korang tersendiri. Korang boleh dapatkan ID Facebook korang dengan cara Sign In ke Facebook korang dan tengok URL di bahgian profile macam contoh ini; http://www.facebook.com/profile.php?id=1234567890. Nombor yang dihujung sekali tu la merupakan ID facebook korang, cam dalam contoh tu 1234567890 merupakan ID Facebook yang diperlukan untuk tutorial ini.
6. Copy dan paste code dibawah ke bahagian CSS atau Edit HTML
.comments-page { background-color: transparent;}
#fb-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #cfe2f3; -moz-border-radius: 10px 10px 0px 0px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-goog-ms-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px; }
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #F0F8FF;}
#fb-comments-page { padding: 0px 5px; display: none;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #cfe2f3; -moz-border-radius: 10px 10px 0px 0px;
-webkit-border-top-left-radius: 10px;
-webkit-border-top-right-radius: 10px;
-webkit-border-bottom-left-radius: 0px;
-webkit-border-bottom-right-radius: 0px;
-goog-ms-border-radius: 10px 10px 0px 0px;
border-radius: 10px 10px 0px 0px;}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px; }
.comments-tab:hover { background-color: #eeeeee;}
.inactive-select-tab { background-color: #F0F8FF;}
Untuk step ini ada 2 cara yang korang boleh buat
A ) Korang Copy dan paste code diatas sebelum perkataan ]]></b:skin> (di bahagian Design > Edit HTML)
ATAU
B ) Korang pergi ke bahagian Design > Template Designer > Advanced > Add CSS dan pastekan code tersebut di dalam kotak CSS tersebut.
Makluman :Sila adjust background color mengikut kesesuaian blog korang.
7 . jangan lupa save!!!
Sumber Rujukan: Sini & sini
[credit by: anamarzablog]
ATAU
B ) Korang pergi ke bahagian Design > Template Designer > Advanced > Add CSS dan pastekan code tersebut di dalam kotak CSS tersebut.
Makluman :Sila adjust background color mengikut kesesuaian blog korang.
7 . jangan lupa save!!!
Sumber Rujukan: Sini & sini
[credit by: anamarzablog]
