Tạo tab comments Facebook và Blogger cho blogspot đơn giản nhất

Tạo tab chuyển đổi comments Facebook và Blogger đơn giản nhất
Với những blogspot sử dụng song song 2 loại comments là comments facebook và comments blogger thì việc bố trí chúng sao cho gọn gàng đẹp mắt là việc rất cần thiết.
Với các template đã tích hợp sẵn 2 loại comments này thường thì cũng tích hợp luôn tab chuyển đổi qua lại giữa chúng.
Nhưng với những blogspot thích code tay thì nhìn vào code của họ thấy có gì đấy hơi cồng kềnh về css cũng như HTML.
Dưới đây chia sẻ cách tạo tab chuyển đổi comments Facebook và Blogger đơn giản gọn nhẹ nhất và cũng không kém phần đẹp mắt.

DEMO

Tạo tab chuyển đổi comments Facebook và Blogger
Trước khi thực hiện việc cài đặt này bạn nhớ gỡ bỏ tất cả những gì thuộc về comments facebook mà bạn đã cài đặt trước đó nếu có.
Bước 1:
Tab luân chuyển qua lại hoạt động dựa trên jquery nên bạn cần thêm thư viện jquery cho blog
Thêm vào trước thẻ </head>
<script async='async' src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript' />
Thêm font Awesome cho blogspot bằng cách vào chỉnh sửa mẫu thêm link css sau vào trước thẻ </head>
<link href='//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet'/>
Nếu bolg đang sử dụng font Awesome và đã có jquery thì bỏ qua bước này.
Bước 2: Thêm đoạn css sau vào trước thẻ ]]></b:skin>
.comments-page {
 background-color: #fff;
 width:100%;
}
#blogger-comments-page {
 padding: 0px 5px;
 display: none;
}
.comments-tab {
 float: left;
 padding:5px 15px;
 margin-right: 0px;
 cursor: pointer; 
 background-color: #f90;
 color:#fff;
}
.comments-tab-icon {
 height: 25px;
 line-height:25px;
 display: inline-block;
 margin-right: 3px;
}
.comments-tab:hover {
 background-color: #f90;
}
.inactive-select-tab{
 background-color: #222;
 color:#fff;
}
@media screen and (max-width:800px){.fb_iframe_widget,.fb_iframe_widget span, .fb_iframe_widget span iframe[style] { min-width: 100% !important; width: 100% !important;}
}
Bước 3: Thêm đoạn javascript sau vào trước thẻ </head>
<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>
Bước 4: Thêm javascript sau vào trước thẻ </body>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
     <div id='fb-root'/>
      <script>
        window.fbAsyncInit = function() {
          FB.init({
            appId      : &#39;&#39;,
            xfbml      : true,
            version    : &#39;v2.7&#39;
          });
        };
        (function(d, s, id){
          var js, fjs = d.getElementsByTagName(s)[0];
          if (d.getElementById(id)) {return;}
          js = d.createElement(s); js.id = id;
          js.src = &quot;//connect.facebook.net/en_US/sdk.js&quot;;
          fjs.parentNode.insertBefore(js, fjs);
        }(document, &#39;script&#39;, &#39;facebook-jssdk&#39;));
      </script> 
    </b:if>
Bước 5 Tìm tới thẻ <div class='comments' id='comments'> nó nằm ngay sau thẻ mở <b:includable id='threaded_comments' var='post'> và thêm vào ngay sau nó đoạn code sau:
Lưu ý:
Có 2 thẻ như vậy nhưng bỏ qua thẻ nằm sau <b:includable id='comments' var='post'>.
<table>
  <tbody>
   <tr>
    <td>
     <div class='comments-tab' id='fb-comments' onclick='javascript:commentToggle(&quot;#fb-comments&quot;);' style='float:left;' title='Facebook Comments'> 
       <i class="fa fa-facebook comments-tab-icon"/>
       Facebook Comments 
     </div>
    </td>
    <td>
     <div class='comments-tab inactive-select-tab' id='blogger-comments' onclick='javascript:commentToggle(&apos;#blogger-comments&apos;);' title='Blogger Comments'>
       <i class="fa fa-comments-o comments-tab-icon"/>
       Blogger Comments
     </div>
    </td>
   </tr>
  </tbody>
 </table>
 <div class='comments-page' id='fb-comments-page'>
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
   <fb:comments data-colorscheme="light" expr:href='data:post.canonicalUrl' expr:title="data:post.title" expr:xid="data:post.id" data-numposts="5" data-width="100%"/>
  </b:if>
 </div>
 <div class='comments comments-page' id='blogger-comments-page' style='display:none;'>
Tiếp theo thêm </div> vào trước thẻ đóng </b:includable> của thẻ mở vừa nói ở trên.
Nếu khó tìm thì cứ save mẫu, blogger sẽ báo lỗi và thẻ đóng đó sẽ nổi màu đỏ để bạn nhận biết.
Bước 6: Lưu mẫu và hưởng thành quả.
Nhận xét

Không có nhận xét nào :