Cara Membuat Komentar Blogger dan Facebook Berdampingan

Jika kode ini masih terpasang di blog BSI, sobat akan dapat melihat bentuk komentar yang berdampingan antara blogger dan facebooker di blog ini. mengapa kita buat dua tipe komentator? perlu kita ketahui bahwa tidak semua pengunjung blog kita adalah blogger, ada juga yang menggunakan akun facebook. jadi untuk memberikan kemudahan berkomentar bagi akun facebook maka kita berikan ruang berkomentar yang berbeda

Jika sobat tertarik membaut dua tipe komentar antara facebook dan blog maka ikuti langkah langkah berikut ini:

1. Login ke account blog
2. Masuk ke rancangan lalu buka Edit HTML
3. Backup template Sobat
4. Centang  Expand Template Widget
5. Cari kode  ]]></b:skin> 
6. Paste kode berikut ini di atas kode ]]></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;}


7. Kemudian Sobat cari kode </head>
   Pastekan kode berikut ini tepat di atas 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/indra.thekochak' 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>


Ganti ID BSI dengan ID facebook Sobat.


8. Kemudian cari kode  <div class='comments' id='comments'>


Catatan:  Kode diatas pada umumnya ada 2, Pastekan kode berikut ini di bawah kedua kode <div class='comments' id='comments'>.





    <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='25' width='550'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>


Pada penempatan kode yang ke dua Sobat hapus kode yang berwarna merah jika kode di bawahnya sama dengan kode warna merah diatas.


Keterangan: 
Angka 25 adalah jumlah komentar yang akan ditampilkan pada komentar facebook. 
Angka 550 adalah lebar kotak komentar facebook. 
Silahkan sesuaikan dengan dengan lebar template sobat BSI sendiri


9. Save template sobat.

semoga  bermanfaat.