Komentar Facebook Dan Blog Berdampingan

SHADOWS || Apa kabar sobat blogger..!! beberapa hari ini saya off dari blog saya dikarenakan saya sibuk dengan dunia nyata saya yang menyita waktu, semoga sobat blogger dalam keadaan sehat wal,afiat. Nah begitu saya buka blog saya ada sobat blogger yang menanyakan bagaimana Membuat Komentar Facebook Dan Blog Berdampingan, saya akan menjawab dengan tutorial ini sebagai jawaban dari sobat HARI F DAY. Tetapi sobat harus ingat jika menambahkan tutorial ini di blog sobat akan sedikit berat waktu loading, ini semua saya balikan kembali kepada sobat jika ingin menerapkannya, nah ini tutornya silahkan ikuti dengan seksama.

Jika sobat telah berhasil menerapkanya maka hasilnya sebagai berikut :

1. Masuk akun blogger anda lalu pilih TEMPLATE, EDIT HTML
2. Lalu cari kode ]]></b:skin> (Untuk memudahkan pencarian, gunakan CTRL + F)
3. Letakan kode CSS di bawah tepat 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;}

4. Setelah itu cari lagi kode </head> kemudian letakan lagi kode di bawah 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='ID FB ANDA' 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>

5. Dari kode di atas, perhatikan kode yang saya beri warna merah. Ganti kode berwarna biru dengan ID Facebook anda.. Contoh : halaman facebook anda www.facebook.com/shadows maka ambil shadows sebagai ID anda.

6. Karena kita akan membuatnya berdampingan dengan komentar bawaan dari blogger. Maka kita perlu menambahkan beberapa script lagi. Silahkan cari kode <div class='comments' id='comments'>. Biasanya kode tersebut tidak hanya 1, kalau di dalam template anda terdapat lebih dari 1 kode tersebut.cari kode yang paling terakhir, jika tidak berhasil ambil yang pertama. Lalu letakan script dalam kotak di bawah ini tepat di bawah kode <div class='comments' id='comments'> :

<!--FB COMMENT-->
 <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='5' width='500'/>
    </b:if>
    </div>
    <div class='comments comments-page' id='blogger-comments-page'>
<!--FB COMMENT-->

Perhatikan script di atas, ada 2 kode yang saya beri warna merah. 5 itu berarti jumlah komentar yang di tampilkan sedangkan 500 itu berarti lebar kolom komentar tersebut. Kedua tanda merah tersebut bisa dirubah sesuai keinginan.

kemudian jangan lupa SIMPAN template anda dan lihat hasilnya .

Nah selesai sudah Cara Membuat Komentar Facebook Dan Blog Berdampingan semoga tutorial ini bermanfaat bagi sobat blogger semua.. happy blogging.