Dah ada kedua² kotak komen ni. Senang la sikit nak pilih mana satu.
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 !
No comments:
Post a Comment