Hướng dẫn tạo Button ẩn/hiện khung bình luận Blogspot

Tutorials Show and Hide Comments For Blogspot. Đối với một Blogger, việc nhận được nhiều bình luận từ các độc giả người truy cập là điều hiển nhiên. Nếu chỉ nhận xét vài ba bốn cái cảm nhận thì rất bình thường, ngược lại nếu có tới hàng mấy chục thậm chí hàng trăm bình luận, nó sẽ khiến trang bài viết blog của bạn dài lê thê nhìn rối ren.

Giải pháp ở đây, mình sẽ "Hướng dẫn làm tạo Button ẩn/hiện khung bình luận Blogspot". Chức năng ẩn hiện khung bình luận rất gọn gàng đẹp mắt :V

Cài đặt nút ẩn hiện khung bình luận đang là xu hướng của tất cả blogger. khi được nhấn vô nó sẽ hiển thị khung bình luận cùng với các cảm nhận từ phía người truy cập đã bình luận trước đó. Ngược lại, nếu bình thường thì nó sẽ ẩn khung bình luận đi hoặc nhấn vô nút ẩn thì khung bình luận sẽ được ẩn ngay đi. :))

Cách cài đặt Button ẩn/hiện khung bình luận blogspot.

Bước 1: Bạn vào một bài viết bất kì trên blog của bạn. Đi tới phần khung bình luận và click chuột phải vào nó. chọn "Kiểm tra/Inspect" tìm Class chứa toàn bộ khung bình luận (như hình bên dưới).

- Ở đây mình có <div class="blog-post-comments comments-system-blogger" style="display:block;"> và chỉ quan tâm tới class đầu tiên là class="blog-post-comments"

Bước 2: Đăng nhập Blogger.com > Tới phần chủ đề > chọn chỉnh sửa HTML > nhấn tổ hợp phím Ctrl + F > tìm đoạn code <div class='blog-post-comments'> và thay thế nó bằng đoạn code bên dưới:

<a href="#" id="comments-show" class="showcontent" onclick="showComm('comments');return false;">Show Comments</a> <div class='clear'/> <div class='comments hide-content' id='comments'> <a href="#" id="comments-hide" class="hiddencontent" onclick="showComm('comments');return false;">Hide Comments</a> <div class='clear'/> {codeBox}

Bước 3: Thêm đoạn CSS tạo Button ẩn/hiện bên dưới đây vào trước thẻ đóng ]]></b:skin> hoặc </style>

/*-- Button Show Hide Comments longkool.com --*/ .hide-content{display:none;margin:0;padding:0;} a.showcontent,#comments a.hiddencontent{display:block;text-decoration:none;position:relative;color:#fff;font-weight:700;font-size:15px;padding:12.5px 0;background:#5593f0;border:2px solid;border-radius:5px;text-align:center;margin:30px auto;letter-spacing:1px;transition:all .3s} #comments a.hiddencontent {background:#fff;color:#acb3b8;transition:all .3s} a.showcontent:hover{background:#fff;color:#5593f0;} #comments a.hiddencontent:hover{background:#acb3b8;color:#fff;}{codeBox}

Bước 4: Chèn đoạn Javascript ẩn/hiện khung bình luận vào trước thẻ đóng </body>

<script type='text/javascript'> //<![CDATA[ function showComm(e){document.getElementById(e)&&("none"!=document.getElementById(e+"-show").style.display?(document.getElementById(e+"-show").style.display="none",document.getElementById(e).style.display="block"):(document.getElementById(e+"-show").style.display="block",document.getElementById(e).style.display="none"))}; //]]> </script>{codeBox}

Bước 5 : Lưu mẫu lại và xem kết quả!
Chúc các bạn thành công!