Cara memasang facebook comment berjajar dengan blogger comment

Pengalaman berpetualang diinternet, mampir dari blog satu ke blog lain, ga sengaja lihat kolom komentar yang terdiri dari komentar facebook dan komentar blogger yang berjajar.

Setelah saya cari, ternyata sudah banyak sekali tutorial tentang hal ini. Namun terkadang tutorial yang saya baca tidak memberikan hasil sukses. Nah, akhirnya berhasil juga saya temukan formula yang pas. Biar ga lupa dan biar teman-teman yang ingin memasangnya tahu bagaimana caranya, berikut saya tulis bagaimana cara memasang komentar facebook yang berjajar dengan komentar blogger:

1. Login ke blogger
2. Pilih menu Template (backup terlebih dahulu untuk menghindari kesalahan) > Edit HTML > pilih Proceed dan centang "Expand Widget Template"
3. Cari kode ]]></b:skin>  dan paste kode berikut ini tepat diatasnya:

   .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: #b7b0b0;}
       .comments-tab-icon { height: 14px; width: auto; margin-right: 3px;}
       .comments-tab:hover { background-color: #eeeeee;-moz-transform:rotate(7deg);
   -o-transform:rotate(7deg);
   -webkit-transform:rotate(7deg);
   -ms-transform:rotate(15deg);moz-box-shadow: 10px 5px 5px #222;
       -webkit-box-shadow: 10px 5px 4px #222;
       box-shadow: 10px 5px 5px #222; -moz-border-radius-topleft: 10px;
   -moz-border-radius-topright: 10px;
   -moz-border-radius-bottomleft: 10px; -moz-border-radius-bottomright: 10px;
   }

4. Kemudian cari kode </head> dan paste kode berikut tepat diatasnya:

   <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' 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 Facebook dengan id facebook Anda
5. Kemudian cari kode <div class='comments' id='comments'> biasanya ada 2, letakkan script berikut tepat dibawah keduanya:

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

   angka 2 menunjukkan jumlah komentar yg ditampilkan, sedangkan width menunjukkan lebar komentar.
6. Kemudian klik Save template.