Tutorial Facebook Comment Box Dalam Blogspot
 |
| zoom untuk lebih jelas :) |
Hey semua berjumpa lagi kali ini.Hari ini macam biasa D'ya Marshmello nak teach you all cara-cara nak letakkan fungsi comment box Facebook dalam blog.Masih tak paham-paham lagi? Cuba korang tengok dekat bahagian bawah blog D'ya berdekatan dengan comment box dan di mana ada fungsi comment box Blogger dan Facebook.Kalau tak paham juga, sila rujuk gambar di atas.Jom kita mulakan tutorial :)
(1) Pergi ke design >> edit HTML >> tick expand widget templates ( backup template untuk langkah keselamatan okay)
(2) Seterusnya ialah dengan menggunakan fungsi ctrl+f ,cari code di bawah ini
<div class='comments' id='comments'>
(3) Dah dapat kan? Kemudian pastekan code di bawah SELEPAS code <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'>
(4) Kemudian pastekan pula di bawah ini SEBELUM code </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 HERE' 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>
(5) Lepas tu tak siap lagi.Tunggu dulu, tukarkan 'your id here' dengan ID Facebook anda.Paham tak macam mana nak cari ID Facebook? Sila rujuk gambar di bawah k.
 |
| zoom untuk lebih jelas :) |
(6) Sekarang sudah paham kan? kemudian cari perkataan /* Comment dan letakkan code di bawah.
.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;}
^^ Nota tanpa kaki : Kalau susah nak cari kod /* Comment, korang boleh try cari kod yang serupa dan seakan-akan kod di atas atau search code *comment
(7) Akhir sekali, jangan save dulu.Pastikan preview dan jangan lupa backup template.Selamat mencuba :)
2 marshmallow komen