Cara Membuat FB Coment berdampingan dengan Blogger Coment

Setelah membahas tentang Cara Membuat Facebook Comment di Blogspot sekarang kita akan membahas Cara Membuat FB Coment berdampingan dengan Blogger Coment dalam bentuk Tab. Selain untuk mempercantik tampilan komentar di blogspot ini juga dimaksudkan untuk memudahkan pengunjung untuk memberikan komentar dalam platform blogger atau facebook. Biar gak bingung silahkan masukkan perhatikan gambar berikut ini

Bagaimana apa masih bingung?
Kalau sudah gak bingung mari kita lanjut ke Cara Membuat FB Coment berdampingan dengan Blogger Coment dalam sebuah tab.

1. Masuk ke akun blogger anda
2. Masuk ke template (Jangan Lupa demi keamanan silahkan back up template anda terlebih dahulu) ->> edit HTML ->> Lanjutkan ->> centang expand widget template
3. Cari kode ]]></b:skin> kemudian copy kode berikut ini diatas kode ]]></b:skin> ( agan bisa memanfaatkan Ctrl + F untuk mempermudah pencarian)

  .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. Cari kode </head> kemudian copy kode dibawah 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 agan' 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 FB agan dengan id fb milik agan misalkan http://www.facebook.com/id-kamu atau http://www.facebook.com/12345678 .

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

  (biasanya ada 2 kode <div class='comments' id='comments'>, dan anda harus copy kan pada kode yang kedua letaknya pada bagian bawah).

  <div class='comments' id='comments'>
<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 data-colorscheme='clear' expr:href='data:post.url' num_posts='2' width='555'/> </b:if> </div> <div class='comments comments-page' id='blogger-comments-page'> 

5. Simpan dan coba lihat hasilnya ...

Semoga artikel Cara Membuat FB Coment berdampingan dengan Blogger Coment ini bermanfaat