3 in 1 comments blogger, comments google, comments facebook for Blogspot

3 in 1 comments cho blogspot là một mẫu comments chuyên nghiệp cho blogspot của bạn, hệ thống comments này được thiết kế theo dạng tabber comments với 3 tab đó là comments blogger, comments google và comments facebook.

Đâ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 == &quot;item&quot;'> <div style='width:100%;height:auto;postion:relative;margin:70px 0 30px;padding:0'> <div id='Button1' onclick='document.getElementById(&apos;comments&apos;).style.display=&apos;block&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button1.style.display=&apos;none&apos;;Button2.style.display=&apos;block&apos;;' 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(&apos;comments&apos;).style.display=&apos;block&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button1.style.display=&apos;block&apos;;Button2.style.display=&apos;none&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;100%&apos;;fb_comments.style.visibility=&apos;visible&apos;;Button3.style.display=&apos;none&apos;;Button4.style.display=&apos;block&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;none&apos;;fb_comments.style.height=&apos;100%&apos;;fb_comments.style.visibility=&apos;visible&apos;;Button3.style.display=&apos;block&apos;;Button4.style.display=&apos;none&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;block&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button5.style.display=&apos;none&apos;;Button6.style.display=&apos;block&apos;;' 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(&apos;comments&apos;).style.display=&apos;none&apos;;g_comments.style.display=&apos;block&apos;;fb_comments.style.height=&apos;0&apos;;fb_comments.style.visibility=&apos;hidden&apos;;Button5.style.display=&apos;block&apos;;Button6.style.display=&apos;none&apos;;' 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 == &quot;item&quot;'>

Các bạn có thể tùy chỉnh ẩn hiện ở trang nào tùy thích nhé

>