Cách tạo nút đóng mở khung Comment trên Blogspot

Chào bạn đã trở lại với Nguyen Ha Blog, bài viết hôm nay mình xin chia sẻ đến mọi người cách tạo nút đóng mở comment cho Blogspot với màu sắc rực rỡ. 

Tiện ích nhận xét trên Blog rất có lợi, ngoài việc giao tiếp, nó cũng có thể cải thiện hiệu suất của Blogspot và thêm nữa blog cũng sẽ gọn gàng khi tiện ích nhận xét bị ẩn. Tuy nhiên, cũng phải có một nút đóng mở comment cho blogspot. Bên cạnh việc giúp cải thiện tốc độ blogspot nhanh hơn theo cách này cũng có thể tối đa hóa khách truy cập khi đọc bài viết.

Cách tạo nút đóng mở khung Comment trên Blogspot

Mặc dù vẫn còn nhiều Blogger khác vẫn sử dụng nhận xét mặc định từ Blogger, kể cả bản thân mình. Và nhiều người vẫn đang sử dụng nhận xét ( comment ) bên ngoài blog mặc định, như khung comment của Facebook. Và họ cũng có lý do nhất định để sử dụng những plugin đó. Nếu việc sử dụng một widget bình luận tốt thì lời khuyên của mình là tốt hơn để sử dụng bình luận Blogger mặc định. Ngoài việc đơn giản, nó cũng không là gánh nặng tốc độ tải blog của bạn.

Nếu bạn muốn tò mò về cách tạo nút đóng mở bình luận ở trên comment như trong ảnh mình đăng thì các bạn cùng xem hướng dẫn của mình nha.

Hướng dẫn tạo nút đóng mở khung Comment trên Blogspot

Như các bài viết khác, các bạn vào chỉnh sửa HTML => tìm <b:skin> và dán đoạn CSS sau đây xuống dưới

/* CSS Đóng Mở Bình Luận */
.buka-komen,.tutup-komen{font-family:inherit;background: linear-gradient(to right, #38b3e0, #e53bb2);color:#fff;font-size:16px;line-height:1.3em;padding:8px 10px;text-align:center;font-weight:700;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px;-webkit-transition:all 218ms;-moz-transition:all 218ms;-o-transition:all 218ms;transition:all 218ms;-webkit-user-select:none;-moz-user-select:none;margin:10px 5px 5px 5px;cursor:pointer;}
.buka-komen{display:block;margin-bottom:20px}
#comments-box{display:none}
Bước tiếp theo, bạn tìm đoạn code sau:
<b:if cond='data:blog.pageType == "static_page"'>
          <b:if cond='data:post.showThreadedComments'>
            <b:include data='post' name='comments'/>
          <b:else/>
            <b:include data='post' name='comments'/>
          </b:if>
        </b:if>
Thông thường đoạn này sẽ nằm ở <b:include data='post' name='post'/>
Sau khi tìm được đoạn code trên, bạn chỉ cần thay đoạn Code mình cung cấp sau đây là được nhé
<b:if cond='data:blog.pageType == "item"'>
<div aria-label='Buka Komentar' class='buka-komen' id='buka-komen' onclick='document.getElementById("comments-box").style.display="block";document.getElementById("tutup-komen").style.display="block";document.getElementById("buka-komen").style.display="none"' role='button' tabindex='0'>Nhấp vào đây để bình luận!</div>
<div aria-label='Tutup Komentar' class='tutup-komen' hidden='hidden' id='tutup-komen' onclick='document.getElementById("comments-box").style.display="none";document.getElementById("tutup-komen").style.display="none";document.getElementById("buka-komen").style.display="block"' role='button' tabindex='0'>Đóng Bình Luận!</div>
</b:if>
<div id='comments-box'>
        <b:include cond='data:blog.pageType in {"static_page","item"}' data='post' name='comments'/>
          </div>
Các bạn lưu lại và vào bài viết kiểm tra nút đóng mở comment nhé.

Lời kết

Như vây, Nguyen Ha vừa chia sẻ cho bạn cách tạo nút đóng mở comment trên Blogspot. Hi vọng bài viết tôi chia sẻ hữu ích cho bạn, nếu có thắc mắc hay ý kiến vui lòng comment xuống dưới. Chúc bạn thành công!

Đăng nhận xét

Mới hơn Cũ hơn

Nhận xét Mới