Cara Membuat Kotak Komentar Facebook Dan Blog Berdampingan

1. Masuk ke akun blogger sobat
2. Selanjutnya masuk pada bagian Template
3. Klik Edit HTML
4. Silahkan centang Expand Template Widget
5. Sudah itu, Anda cari kode ]]></b:skin>, untuk memudahkan pencarian, silahkan tekan ctrl+f.
6. Setelah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode tadi

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

catatan:
Silahkan hapus kode berwarna merah itu, jika Anda ingin membuat kotak komentar facebook menjadi transparan.

7. Kemudian Anda cari kode </head> , seperti tadi untuk lebih memudahkan pencarian tekan ctrl+f
8. Jika sudah ketemu, silahkan letakkan kode di bawah ini tepat di atas kode </head> tadi

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

catatan:
Silahkan Anda ganti tulisan berwarna merah tersebut dengan ID FB Anda. Sudah tahu kan, apa itu ID FB? Jika Anda sudah ganti, misalnya http://facebook.com/justangzealotous berarti ID FB kamujustangzealotous. Namun, jika Anda belum menggantinya, maka ID FB Anda adalah sebuah angka-angka, contoh http://facebook.com/1234567890. Untuk melihat ID FB, Anda bisa masuk ke profil FB kamu, kemudian silahkan lihat pada adress bar.

9. Selanjutnya, silahkan Anda cari kode <div class='comments' id='comments'>
10. Umumnya, kode <div class='comments' id='comments'>, terdapat 2. Silahkan Anda letakkan kode berikut tepat di bawah kedua kode tersebut.

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

catatan:
Silahkan Anda, hapus kode berwarna merah tersebut, jika kode di bawah sama. Kalau tidak, yah tidak perlu dihapus. Perhatikan, untuk yang nomor 3 adalah jumlah komentar yang akan muncul di kotak komentar facebook, untuk yang nomor 400 adalah lebar kotak komentar. Silahkan ganti sesuai dengan keinginan Anda.

11. Setelah itu, klik Simpan Template

Sumbernya disini : http://adf.ly/JnZVx