Add Facebook Comments Box With Blogger Default Comment | Version 2

Bagi yang mengikuti Tutorial Memasang Kotak Komen Facebook dan Blogger Dalam Blog. Ini adalah kesinambungan daripada tutorial tersebut. Kalau dulunya, bahagian Facebook berada dibahagian utama. Sekarang, korang dah boleh ubahkannya dengan bahagian default komen Blogger. Contohnya seperti gambar dibawah;

Facebook Comments Box With Blogger Default Comment
Gambar atas (sebelum) dan bawah (selepas)


Cara²nya ;

Hanya perlu tukarkan sebahagian code pada bahagian NO 6 dalam tutorial sebelum ini dengan code dibawah.
<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>
Menjadi seperti begini;
<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 == &quot;item&quot;'>
<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'>
Kemudian, bahagian CSS pula. Hanya perlu tukarkan bahagian No 11 dengan code dibawah.

p/s: Sekiranya anda mendapati code CSS yang terdahulu dah tak ada kat dalam bahagian CSS tersebut. Anda tak perlu risau. Buka kembali Design > Edit HTML > klik Expand Widget Templates dan kemudian search setiap baris code² CSS sebelum ini dan tukarkan dengan code² dibawah.
.comments-page { background-color: #f2f2f2;}
#fb-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;}
Anastasyea : Saya dah test code² tersebut dalam blog ini dan ianya berjaya. Tak percaya .. tengok gambar kat atas (",)

16 comments :

  1. wahhhhhhhhhhhhhhhhhhhh masuk jerk belog neh terus rase nak nyanyi lagu 1 Malaysia. eh taknaklahhh 1 malaysia nak nyanyi lagu tanggal 31ogos lahhh...:)

    ReplyDelete
  2. rajin betul share something kat blog..tanx yea...:)

    ReplyDelete
  3. terbaek la tuto nie.. tpi risau la plak tkut berat page :)

    ReplyDelete
  4. @AbgFeroZ : Cuba je dulu. Lepas tu test speed loading. Kalau rasa tak suka. Upload je file HTML yang lama. (",)

    ReplyDelete
  5. hmmm...terror sungguh buat tutorial...mmg besh

    ReplyDelete
  6. thx sis
    dah jadi =)

    cuma keburukkannya adalah
    tapi hanya comment di blog saja yang display di recent comment

    ReplyDelete
  7. kotak tab ko cantik la bhg komen ni. cane buat?

    ReplyDelete
  8. Guna tutorial ni gak cuma ada penambahan CSS utk cantikkan yg lain2 =)

    ReplyDelete
  9. kenapa dia tulis unable to reach "http://.........." kat bawah kotak fb comment tu? boleh tolong setel kan?

    ReplyDelete
  10. sy buat xjdi.xkuaw pape pon.da ikut step semua ada.tpi xkuaw pape kt blog

    ReplyDelete
  11. boleh bantu saya? sya dah cuba tapi tak menjadi... harap cik dapat bantu..

    ini blog saya http://sempoicornerdisini.blogspot.com/

    saya dah cuba ..tapi gagal,saya dah ada widget komen..tapi nak tukar sebab yang ni lebih best..harap ada respond dari check..

    inbox facebook saya kalau cik sudi bantu

    https://www.facebook.com/zackchenta46

    ReplyDelete
  12. ?????

    nothing happen.pm aq kalau ada masa https://www.facebook.com/cyrilrain

    ReplyDelete
  13. Salam.. saya cuba jugak buat .. tak menjadi..

    blog saya :
    http://mrkumai.blogspot.com/

    Facebook saya : https://www.facebook.com/mrkumaiblogspot.mrkumai?ref=tn_tnmn

    Saya gagal untuk buat perubahan dalam template saya.

    ReplyDelete