Cara Memasang Tab Facebook Comment Dan Blogger Comment

Biasanya Widget Facebook Comment yang terpasang di blogger berdiri sendiri diatas atau dibawah Blogger Comment. Tentu hal ini membuat Form Komentar menjadi lebih panjang dan kurang rapi.

Kali ini saya akan mencoba share cara memasang Facebook Comment dan Blooger Comment dalam bentuk Tab berdampingan. Keuntungannya selain bentuknya Rapi dan menghemat ruang komentar, pengunjung lebih mudah memilih mode komentar.

Tanpa berpanjang lebar, mari ikuti caranya di bawah ini:

1. Masuk ke dashboard blogger
2. Pilih Template >> edit HTML
3. Cari kode berikut:

<div class='comments' id='comments'>

4. Letakkan kode di bawah ini, tepat dibawah kode <div class='comments' id='comments'> tadi.

<!-- facebook comments tab-->
<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'>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
<script src='http://code.jquery.com/jquery-latest.js'/>
<meta content='USER_NAME_FACEBOOK' property='fb:admins'/>
 <script type='text/javascript'>
function commentToggle(selectTab) { $(&quot;.comments-tab&quot;).addClass(&quot;inactive-select-tab&quot;); $(selectTab).removeClass(&quot;inactive-select-tab&quot;); $(&quot;.comments-page&quot;).hide(); $(selectTab + &quot;-page&quot;).show(); }
</script>
<style>
#blogger-comments-page { padding: 0px 5px; display: none;}
.comments-page { background-color: #f2f2f2;}
.comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: default; background-color: #fff;border:1px solid #DDD}
.comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
.inactive-select-tab { background-color:
#e8e8e8; border:1px solid #DDD; cursor:pointer}
.inactive-select-tab:hover{background-color:#f4f4f4;}
</style>
<!-- facebook comments tab end -->

5. Ganti USER_NAME_FACEBOOK dgn user name facebook kalian.

6. Sesuaikan nilai width='400' dg template kalian, jika kurang lebar, lebarkan menjadi, misal: width='500'.
7. Simpan dan lihat hasilnya.

CATATAN: jika code <div class='comments' id='comments'> ada 2, maka gunakan keduanya. Namun ada juga template yang cukup pasang pada kode yang ke-2 saja. Silahkan try and error.

Pengunjung lain juga membaca :