Letak kotak komen facebook tanpa buang kotak komen blogger / blogspot


Sila ke entry "Cara Letak Kotak Komen Facebook di blog" untuk tutorial yg dah di edit

Akhirnya berjaya jugak letak kotak komen facebook kat blog ni. Sebelum ni pernah jumpa tutorial how to put facebook comments box in blogger tapi kebanyakannya memerlukan kita hide blogger / blogspot comments box pastu yg part paling cerewet nak kena genarate facebook application ID. Kali ni jumpa tutorial yg agak senang dan boleh beri pilihan untuk komen guna facebook comments box atau guna blogger comments box.
 Jika nak komen guna FB

 Jika nak komen guna kotak komen biasa

Untuk demo boleh cuba kat bawah entry ni atau mana-mana entry kat blog ni (Terkini : kembali guna kotak komen blogspot sahaja atas sebab2 tersendiri). Bagi yang nak cuba boleh ikut step by step kat bawah ni:

1. Pergi ke bahagian design Edit HTML > Tick Expend widget templates > Download full templates (sebagai langkah keselamatan).

2.  Cari (Ctrl+F) code <div class='comments' id='comments'> , kemudian paste kan code dibawah ni selepas code <div class='comments' id='comments'> tadi.
<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' 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(&quot;#blogger-comments&quot;);' 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 == &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'>

 




3. Kemudian pastekan code dibawah ini sebelum </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.
<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>
4. Kemudian letakkan code dibawah di bahagian css code
.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;}

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.



5. Save

Sumber : Blogger: How to Add the Facebook Comments Box

20 comments:

  1. kenapa saya buat x jadi tab pun..
    berterabur ke bawah..

    ReplyDelete
  2. ade broken link.. cuba check blk

    ReplyDelete
  3. ade broken link... cuba check balik

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. nice share... dah try tapi terkandas di step ke-4... cm mana kalau saya tak jumpa /* Comments ?

    ReplyDelete
  6. css code pon x jumpa... pening2.... hehehe..

    ReplyDelete
  7. owh.. kat situ rupanya...
    yea..!!!! akhirnya dah jadi....!!!!
    alhamdulillah....
    thanks ye... jasamu dikenang... hehehe

    ReplyDelete
  8. tenkiu!! dah jadi dah dengan bimbingan ni...refers 2,3 blog gak nk faham ni...huhu..tp dah berjaya!! heheh....

    ReplyDelete
  9. Step 4, Tak perlu cari perkataan comment. Lebih baik pastekan kat dlm CSS .. kat bawah sekali. Bahagian CSS tu boleh cari kat

    Design > Template Designer > Advance > Add CSS

    kemudian save. Itu je ..

    www.anastasyea.com

    ReplyDelete
  10. tutorial ni mngelirukan. cuba edit entry n spesifikkan lagi. thanks :)

    ReplyDelete
  11. &lt;/head&gt; mana nak cri kod ni.. tak jumpa pun

    ReplyDelete
  12. step ke 3 tu tak tau cana?harap dapat tolong..terima kasih

    ReplyDelete
  13. saya try buat, jadi tapi dia x duduk kat bwah post...dia muncul kat tgah2 antara post dgn button share ape semua...nape ekk?

    ReplyDelete
  14. alar... saye buat... x menjadi lar... :'(

    ReplyDelete
  15. kalau xde fb id? profile fb saye tuu ade username aje..

    ReplyDelete
  16. tak jd pon .. rasenye da ikut step -.-

    ReplyDelete
  17. saya buat jadi...tapi kalau komen guna blog punya comment pastu teruih hilang komen fb dalam blog....awat jadi macam tu ?

    ReplyDelete
  18. saya dah try . no eror . dah review tapi tak jadi . hehe . tak taw knapa .

    ReplyDelete