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é. 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é !

Bài Viết Cùng Chủ Đề

• [Tips] - Widget bình luận (comments) mới cho blogspotComments hay bình luận là những lời góp ý của bạn đọc về blog của mình, tạo widget comments cho blogspot giúp admin nha ...
• Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website Kỹ Thuật Tối Ưu SEO Onpage Cho Blogspot Và Website  từ A tới Z cho website và blogspot: Bao gồm những kỹ thuật tối ưu ...
• Vì sao blogspot không nhận thumbnail khi share linkThumbnail là hình đại diện của một bài viết hay một trang web nó mang tính chất hiển thị nhằm mô tả cho bài viết hay mộ ...
• [Tips] - Những thủ thuật blogspot cần phải có cho blogThủ thuật blogspot là gồm những tiện ích giúp làm đẹp cho blogspot và giúp blog trở nên chuyên nghiệp hơn, nhưng cũng t ...
• [Tips] - Tabber widget chuyên nghiệp cho blogspot (MultiTab)Tabber widget hay còn gọi là Multi Tab cho blogspot, Là một tiện ích nằm trên widget mà các mẫu blogspot nước ngoài thư ...