Cara Bikin Coment FB Berdampingan Dg Coment Bloger

Cara Membuat Kotak Komentar FB Disebelah Kotak Komentar Blogger lengkap dengan tombol buka dan penutup. Sangat bagus memang dengan menggunakan cara ini gan, disamping tanpilannya menjadi elegant, kita juga bisa menghemat tempat. Disana nanti pengunjung bisa memilih antara berkomentar dengan menggunakan kotak komentar FB atau dengan kotak komentar Blogger. Lihat screeshoot:

1. Masuk ke blogger dan pilih Template ----> edit HTML ----> Proceed---> Centang Expand Widget Templates .2.cari code</head> lalu copy code di bawah ini tepat di atas code </head>

3.lalu ganti YOUR ID FB PROFIL Dg ID punya anda sendiri tentunya ID yang Valid.

4.Untuk melihat cara menemukan YOUR ID FB PROFIL Klik ==>DISINI<==

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

5.Cari kode <div class='comments' id='comments'>   (Gunakan CTRL+F)
6.Bila ada dua <div class='comments' id='comments'> Maka pilih yang pertama dan jika gagal maka pilih yang urutan kedua.
7.lalu copy dan vaste code di bawah ini tepat di bawah code <div class='comments' id='comments'> yang pertama atau kedua.

<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'/><br /> <fb:comments-count expr:href='data:post.url'/> Comments<br /> </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<br /> </div><div class='clear'/></div><div class='comments-page' id='fb-comments-page'><b:if cond='data:blog.pageType == "item"'><br /> <div id='fb-root'/><fb:comments expr:href='data:post.url' num_posts='2' width='400'/><br /> </b:if><br /> </div><div class='comments comments-page' id='blogger-comments-page'>

8.Sesudah itu lanjuntkan dengan memasang kode CSS berikut. Untuk memasangnya cari kode #comment atau .comment dan letakkan kode berikut dibawahnya atau diatasnya (terserah kalian).

.comments-page { background-color: #f2f2f2;}<br /> #blogger-comments-page { padding: 0px 5px; display: none;}<br /> .comments-tab { float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #f2f2f2;}<br /> .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}<br /> .comments-tab:hover { background-color: #eeeeee;}<br /> .inactive-select-tab { background-color: #d1d1d1;}

9.Selanjutnya SAVE tample anda dan lihat hasilnya.

10.selesai sampai di sini dan semoga berhasil.