Hướng dẫn TAB bình luận facebook và google cho blogger

Hướng dẫn TAB bình luận facebook và google cho blogger

Thêm đoạn code Sau Trước </head>

<meta content='FACEBOOK APP ID CỦA BẠN' property='fb:app_id'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1'/> 
    <script src='http://code.jquery.com/jquery-latest.js'/>
    <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>

/*--- Tabbed Facebook Comments By MBT ----*/
.comments-page {  background-color: #f2f2f2; width:450px;} 
    #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;}

/*--- Bạn Cũng Có Thể Sửa CSS Cho Đẹp ---*/
VD : 
/*
    .comments-page {  /*background-color: #f2f2f2;*/ width:100%;} 
    #blogger-comments-page {  padding: 0px 5px;  display: none;} 
    .comments-tab {    color: #fff; float: left; padding: 5px; margin-right: 3px; cursor: pointer; background-color: #50a246;} 
    .comments-tab-icon { height: 14px;  width: auto;  margin-right: 3px;} 
    .comments-tab:hover { background-color: #46a28d;} 
    .inactive-select-tab { background-color: #f60;}
*/

<!--Thêm thêm 1 thẻ </div> vào sau đoạn <div class='comments' id='comments'>...</div>
Sau đó thêm đoạn code bên dưới vào sau dòng lệnh <div class='comments' id='comments'>
-->
<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://2.bp.blogspot.com/…/AAAAAAAAGBc/PzwMIo1g1Is/s400/fb…/> 
<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 class='comments-page' id='fb-comments-page'> 
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<div id='fb-root'/>
<fb:comments colorscheme='light' expr:href='data:post.canonicalUrl' expr:title='data:post.title' expr:xid='data:post.id' width='450'/> <div style='color:#fff; background-color:#3B5998;border: solid 1px #ddd; font-size:10px; padding:3px; width:440px;'>Facebook Comments by 
<b><a href='http://www.mybloggertricks.com/' style='text-decoration:underline; color:#fff;' target='_blank' title='Blogger Widgets'>Blogger Widgets</a></b> 
</div>
</b:if> 
</div><div class="comments comments-page" id="blogger-comments-page">