CARA PANTAS UNTUK LETAK KOTAK KOMEN FACEBOOK DI BLOG - SISHAWA DESIGN
test banner

Hot

6.3.17

CARA PANTAS UNTUK LETAK KOTAK KOMEN FACEBOOK DI BLOG

Kali ni sis nak kongsi bagaimana untuk pasang kotak komen facebook di blog dengan cara yang agak mudah dan pantas. Sis percaya cara ni semua orang boleh buat. Tapi kotak komen facebook ni rasanya hanya boleh di pasang pada template responsive dan lain-lain yang sewaktu dengannya ja. Template biasa tak ada support untuk benda ni. Kalau tak silap lah. Betulkan lah kalau sis salah ya.


Ini cara-caranya untuk memasangnya.

1- Login ke akaun blogger >> Dashboard >> Theme >> Edit Html

2- Klik cursor pada mana-mana bahagian di dalam kotak Html dan tekan Ctrl + F secara serentak untuk membuka kotak carian (Search box).

3- Sekarang Copy dan Paste kod di bawah ini ke dalam kotak carian tadi dan terus tekan Enter.
div class='comments' id='comments'>
4- Step terakhir, Copy kod seterusnya di bawah ini dan Paste kan betul-betul di bawah kod yang di cari 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://www.postcompetitiveinsight.com/wp-content/uploads/2015/08/post-competitive-insight-facebook.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='5' width='600'/>
</b:if>
</div>
<div class='comments comments-page' id='blogger-comments-page'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content=' MASUKKAN ID FB AWAK KAT SINI ' 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>
<style>.comments-page { background-color: #D5C7E3;}
#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: #c0d4f6;}
.inactive-select-tab { background-color: #d1d1d1;}</style>

Eh jangan lupa untuk masukkan ID Facebook awak pada bahagian yang sis telah highlight kan dengan warna merah tu ya. Kalau nak ubah kelebaran size kotak komen boleh ubah pada bahagian yang berwarna biru tu.

Sekarang preview dulu, kalau tak ada apa-apa error bolehlah tekan Save! Itu je caranya. Senang saja kan?

Goodluck!!

5 comments:

  1. Terbaik sis, buat tutorial macamana nak dapatkan ID FB ya sis...

    ReplyDelete
  2. Bagus inisiatif awak ni SA...kira amal jariah jugak ni

    ReplyDelete