Cara membuat komentar FB dan Blog berdampingan

Komentar facebook dan blog berdampingan? maksudnya seperti apa? Nah, biar teman teman ga bingung, bisa melihat contohnya pada gambar di bawah ini

Komentar Facebook dan Blogger yang Berdampingan

Nah, sudah tau kan maksudnya seperti apa? pada kotak komentar model ini, akan terdapat dua tab menu yang masing masing berisi kotak komentar dengan facebook dan kotak komentar default dari blogger. tertarik untuk membuatnya?


1. Masuk ke Edit HTML, kemudian beri centang pada expand widget template. Oh ya, jangan lupa di back up dulu templatenya yah .


2. Cari kode berikut <div class='comments' id='comments'> 


3. Kode berikut di bawah kode di atas

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

4. Cari kode </head> kemudian pastekan kode berikut di atasnya

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

5. Kemudian cari kode berikut  /* Comment atau #comments. Kemudian letakkan kode berikut di bawahnya

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


Keterangan :

• Ganti kode warna biru denga jumlah coment yang ingin di tampilkan dan  berapa ukuran lebar yang diinginkan
• Ganti kode warna merah dengan id facebook teman teman, contoh alamat fb saya https://www.facebook.com/mr.rinkido nah, id nya adalah mr.rinkido

6. Save dan lihat hasilnya