Hướng dẫn chèn khung nhận xét của Blog vào bài viết tại trang index

Bài viết này mình hướng dẫn cách đưa khung nhận xét mặc định của Blog vào bài viết tại trang index như trang chủ, trang label, trang lưu trữ,...giúp tăng sự tương tác giữa khách truy cập với bài viết. Đây là một thủ thuật hay nên được áp dụng vào mỗi Blog.

Thủ thuật này rất đơn giản các bạn chỉ cần chèn đoạn mã sau đây vào nơi muốn hiển thị trong bài viết tại trang index như sau:

Copy

<b:if cond='data:view.isMultipleItems'>

  <div class='comment_form'>

    <iframe frameborder='0' id='comment-editor' expr:src='data:post.commentFormIframeSrc' width="100%"/>

    <script src="https://www.blogger.com/static/v1/jsbin/2567313873-comment_from_post_iframe.js"></script>

    <script>BLOG_CMT_createIframe('https://www.blogger.com/rpc_relay.html');</script>

  </div>

</b:if>

Xem thêm: Một số thẻ điều kiện thông dụng và cách sử dụng trong Blogspot

Mở rộng ra nếu bạn muốn ẩn khung nhận xét và sử dụng nút nhận xét khi click thì làm theo cách sau:

Hình minh họa khi sử sụng nút click

Thêm style='display:none' vào <div class='comment_form'> thành <div class='comment_form' style='display:none'>

Viết jquery cho nút click đặt trước </body>

Copy

<b:if cond='data:view.isMultipleItems'>

<script>

//<![CDATA[

  $('.post').each(function() {

    var d = $(this);

    $(".comment-count", d).click(function(n) {

      return n.preventDefault(), $div = $(".comment_form", d), $div.toggle(), !1

    })

  })

//]]>

</script>

</b:if>

Kiểm tra xem template đã có link thư viện jquery chưa nếu chưa có chèn trước </head>

Copy

<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>

Đặt nút click sử dụng class comment-count ví dụ:

Copy

<a class='comment-count' expr:title='data:messages.postAComment' href='javascript:void(0);'>

  <data:messages.comments/>

</a>

Các bạn xem demo tại trang chủ Blog mình. Chấm hết bài!!!