Cara Membuat Kotak Komentar Facebook Dan Blog Berdampingan

Cara Membuat Kotak Komentar Facebook Dan Blog Berdampingan - kali ini saya akan membahas tentang dua jenis kotak komentar ini. Sebenarnya kotak komentar facebook sudah banyak diterapkan, ya itu semua untuk mempermudah penerimaan komentar agar para pembaca akan terasa senang dan tidak bingung saat mengomentari blog anda. Jika yang biasa kita lihat adalah kotak komentar yang secara vertikal alias tidak berdampingan, itu akan membuat halaman page sobat akan banyak dan itu tidak efisien. Untuk itu perlu adanya perdampingan antara kedua kotak komentar tersebut. Untuk contohnya, bisa dilihat disini :

Jika tertarik, ikuti langkah berikut :

1. Login ke blogger
2. Klik Rancangan >> Edit HTML >> Expand Widget Template
3. Lalu cari kode <div class='comments' id='comments'> lalu paste-kan kode berikut tepat dibawahnya

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

Nb: angka 400 sesuaikan dengan lebar kotak komentar sobat

4. Sekarang, cari kode </head>
5. Jika sudah ketemu, paste-kan kode berikut diatasnya

<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/>
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <meta content='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>

Nb : ID Facebook sesuaikan dengan id fb sobat masing-masing

6. Terakhir, cari kode /* Comment atau #comments
7. Lalu, paste-kan kode berikut tepat dibawahnya

.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. Jika sudah, Save Template

Jika ada kesulitan, mohon berkomentar
Selamat Mencoba

Tweet