Cara Pasang Kotak Komen Facebook Di Blog ~ Kaedah Buat Blog Dan Tutorial

CONTOH KOTAK KOMEN FACEBOOK DI DALAM BLOG

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

*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.

5. 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>

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

.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;}

****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. Cam saya ni saya guna warna biru .

Kaedah Buat Blog Dan Tutorial

Tuesday, 18 December 2012

Cara Pasang Kotak Komen Facebook Di Blog

2 comments: