Cara Membuat Kotak Komentar Facebook di bawah Posting Blog

Halo semuaaa ^^
Selamat Malam.....
Kali ini, Aku akan posting tentang Cara Membuat Kotak Komentar Facebook di bawah Posting Blog. Dengan cara ini, Tampilan komentar kalian bisa lebih menarik dan Pengunjung Blog bisa memilih mau berkomentar di Facebook / Blogger.
Berikut ini caranya


    ~ Login Blogger
    ~ Klik Dashboard > Template > Edit HTML.
    ~ Jika sudah, cari kode  ]]></b:skin> menggunakan ctrl + f

Kalau sudah ketemu, paste kode berikut 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;}

NB: Tulisan berwarna Orange fungsinya untuk menentukan Background Kolom


    ~ Lalu cari kode </head>

    ~ Jika sudah ketemu, masukkan kode berikut 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='ID FB kalian' 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: Kode yang berwarna biru, di ganti dengan ID facebook kalian, misal : https://www.facebook.com/nama.id jadi, ID kalian berada pada tulisan yang berwana biru.

    ~ Kemudian cari kode  <div class='comments' id='comments'>

NB:  Umumnya kode tersebut ada 2, Copy dan 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='2' width='400'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>

NB: ~ Pada penempatan Kode ke dua, hapus kode berwarna biru yang <div class='comments comments-page' id='blogger-comments-page'> apabila kode           di bawahnya sama.
      ~ Angka yang berwarna Merah dan Hijau di atas, angka 2 Adalah Jumlah komentar yang akan tampilkan pada komentar Facebook.
      ~Angka 400 merupakan lebar kotak komentar Facebook.

Lalu Klik Simpan

-SELESAI-

Terimakasih...
Semoga bermanfaat yaa...
Enjoy Blogging ^^ ♪