Đây là một dạng comments mới 3 trong một giúp blogpsot của bạn trở nên chuyên nghiệp hơn với kiểu tabber comments này. Còn chần chừ gì nữa xem demo và mần ngay thôi nào.
Cách thực hiện
Để làm được như hình bên trên thì khá đơn giản bạn chỉ cần thêm đoạn code sau ở nơi cần hiển thị comments, thông thường thì comments nằm ngay dưới bài viết liên quan (Related posts).
<b:if cond='data:blog.pageType == "item"'> <div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'> <div id='Button1' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='none';Button2.style.display='block';' style='margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px;display:block'>Blogger Comments</div> <div id='Button2' onclick='document.getElementById('comments').style.display='block';g_comments.style.display='none';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button1.style.display='block';Button2.style.display='none';' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:left;background:#FC9543;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Blogger Comments</div> <div id='Button3' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='none';Button4.style.display='block';' style='margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div> <div id='Button4' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='none';fb_comments.style.height='100%';fb_comments.style.visibility='visible';Button3.style.display='block';Button4.style.display='none';' style='display:none;margin-bottom:30px;padding:0;text-align:center;float:right;background:#3E5B99;color:#fff;font-weight:700;cursor:pointer;width:33.3%;height:35px;line-height:35px'>Facebook Comments</div> <div id='Button5' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button5.style.display='none';Button6.style.display='block';' style='float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div> <div id='Button6' onclick='document.getElementById('comments').style.display='none';g_comments.style.display='block';fb_comments.style.height='0';fb_comments.style.visibility='hidden';Button5.style.display='block';Button6.style.display='none';' style='display:none;float:right;margin-bottom:30px;margin-right:33.3%;margin-top:-65px;padding:0;text-align:center;background:#CB4437;color:#fff;font-weight:700;cursor:pointer;width:33.5%;height:35px;line-height:35px'>Google Comments</div> </div> <div id='g_comments' style='display:none;text-align:center'> <script src="https://apis.google.com/js/plusone.js"></script> <div id='gcontainer' style="max-width:100%"><div class="g-comments" expr:data-href='data:post.canonicalUrl' data-first_party_property="BLOGGER" data-view_type="FILTERED_POSTMOD" data-width="642"/></div> </div> </b:if>Việc cuối cùng là lưu mẫu lại và quay trở lại trang bài viết kiểm tra thành quả mình vừa làm được. Sở dĩ tôi nói quay ra trang bài viết bởi vì đoạn code này chỉ hiện ở trang bài viết khi sử dụng thẻ
<b:if cond='data:blog.pageType == "item"'>Các bạn có thể tùy chỉnh ẩn hiện ở trang nào tùy thích nhé. Tham khảo thêm bài viết
>> Ẩn tiện ích trên trang cho blogspot
Chúc các bạn thành công nhé !
Icon CommentsIcon Comments