Cara Membuat Komentar Facebook Dan Blog Berdampingan

Cara Membuat Komentar Facebook Dan Blog Berdampingan. Untuk Membuat post FaceBook Dan blog secara berdampingan tidaklah sulit. Saat ini sangat Populer membuat Komentar FaceBook dan Blog Berdampingan Secara Pofesional. Mempermudah pengunjung anda untuk Koment dan Mempercantik Blog.

ScreenShoot di atas adalah contoh Coment Berdampingan. Dan sekarang Mari kita Lihat  Cara Membuat Komentar Facebook Dan Blog Berdampingan.


Cara Membuat Komentar Facebook Dan Blog Berdampingan:

• Login Ke account Blogger anda
• Klik Rancangan kemudian Klik Edit HTML
• Untuk Berjaga-jaga Salah penempatan anda, Download template anda sebelum di Edit
• Centang Pada Expand Template Widget
• Cari Kode ]]></b:skin> (Gunakan CTRL+F Untuk Mempermudah)
• Masukkan Kode di Bawad ini di Atas ]]></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;}

• Kemudian Cari Kode <head/> Dan Masukkan Kode dibawah ini 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 Facebook anda' 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><span style="font-size: 50%">Widget edited by <a href="http://korpsbriand.blogspot.com/" target="_blank" rel="follow">Blog Mas Hanif</a></span>

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

Keterangan:  Pada umumnya kode tersebut ada 2, copy dan pastekan kode berikut ini dibawah kode <div class='comments' id='comments'> yang pertama dan kedua. 

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

Perhatikan angka yang berwarna merah dan biru diatas, angka 5 adalah jumlah komentar yang ditampilkan pada komentar facebook. Dan angka 500 merupakan lebar kotak komentar facebook. Anda dapat menyesuaikannya sesuka hati, tapi kalu boleh saya kasih saran, sesuaikanlah dengan lebar template anda agar kelihatan rapi. Dan perhatikan pula kode yang berwarna merah, jika penempatan kode dibawah <div class='comments' id='comments'> yang kedua terdapat kode yang sama, maka hapus salah satu kode tersebut.


Contoh: 

<div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle("#fb-comments");' 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("#blogger-comments");' 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 == "item"'>
<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'>

<div class='comments comments-page' id='blogger-comments-page'> ( hapus salah satu)

• Langkah Terakhir [ SAVE ] dan Lihat hasilnya

 NB:
Jika semua langkah-langkah membuat komentar blog dan facebook berdampingan ini anda ikuti dengan benar, maka seharusnya anda berhasil melakukannya. Namun jika Anda memiliki struktur template yang berbeda, anda dapat meletakkan kode pada poin No.8 dibawah kode <div class='comments' id='comments'> yang kedua saja.