Membuat Komentar Facebook Berdampingan Komentar Blog

Hanya sekedar sharing saja bagi yang ingin membuat 2 form komentar di blog yaitu komentar facebook dan blog secara berdampingan.

1. Login ke Blog
2. Rancangan - Edit HTML
3. Untuk menghindari keselahan, Backup template anda terlebih dahulu dengan Download lengkap
4. Centang "Expand Template Widget"
5. Cari Kode <div class='comments' id='comments'>
    Biasanya akan terdapat 2 kode tersebut di template anda
    Copy kode di bawah ini tepat di bawah kode <div class='comments' id='comments'> yang ke 2

<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'>

Keterangan :

2 : Jumlah Komentar Facebook yang akan di tampilkan

400 : Lebar Komentar Facebook

6. Lalu Cari kode </head>
    Copy Kode dibawah ini tepat diatas kode </head>

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>

<script src='http://code.jquery.com/jquery-latest.js'/>

<meta content=' https://www.facebook.com/zuryoza.xkill ' 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>

7. Cari kode /* Comment atau #comments dan copas kode dibawah dan taruh di atasnya.
    setiap template mungkin berbeda , jadi cari yang mirip atau bisa juga ditaruh diatas ]]></b:skin>

.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;}

8. Simpan

Share this article :

Tweet

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Warehouse1994

Facebook Comment