Banner

Tùy biến thông báo khi tắt nhận xét bài đăng Blogspot

Cách tạo thông báo hiển thị không cho phép nhận xét mới khi vô hiệu hóa nhận xét bài đăng trong Blogger


Trong tùy chọn bài đăng khi đăng mới hay chỉnh sửa có tùy chọn cài đặt hiển thị nhận xét của người đọc trong đó cho phép là tùy chọn mặc định và không cho phép nếu bạn muốn tắt nhận xét cho bài đăng đó.

Khi bạn tắt nhận xét, cũng cần tạo thông báo hiển thị để người đọc biết được bài đăng đó không cho phép nhận xét. Tuy nhiên trước khi tạo thông báo mình giải thích qua về 2 tùy chọn không cho phép nhận xét như sau:

  • Không cho phép, hiển thị liên kết hiện có: tùy chọn này sẽ hiển thị thông báo "Không cho phép có nhận xét mới." nếu bài đăng đó không có nhận xét và hiển thị phần nhận xét của người đọc đã đăng nhận xét trước khi bạn tắt nhận xét khi chỉnh sửa bài đăng.
  • Không cho phép, ẩn liên kết hiện có: với tùy chọn này sẽ ẩn tất cả không hiển thị thông báo cũng không hiển thị phần nhận xét của người đọc đã đăng nhận xét.

Tùy biến thông báo khi tắt nhận xét bài đăng

Rõ ràng khi sử dụng tùy chọn Không cho phép, ẩn liên kết hiện có sẽ không có thông báo hiển thị và lúc này chúng ta cần tạo ra thông báo trong theme, bài viết này mình chỉ hướng dẫn cho theme với widget version 2

Trong tiện ích widget Blog1, bạn tìm 2 thẻ b:includable:

+ Bài đăng không có nhận xét, thẻ <b:includable id='comments' var='post'>, trong thẻ này có đoạn:

<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='commentForm'/>
    <b:else/>
      <data:post.noNewCommentsText/>
    </b:if>
  <b:else/>
    <b:if cond='data:post.allowComments'>
      <b:include data='post' name='addComments'/>
    </b:if>
  </b:if>
</b:if>

Bạn sửa lại thành:

<b:if cond='data:post.allowComments'>
  <b:if cond='data:post.embedCommentForm'>
    <b:if cond='data:post.allowNewComments'>
      <b:include data='post' name='commentForm'/>
    <b:else/>
      <div class='thread-locked-alert'>
        <svg viewBox='0 0 24 24'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>
        <font> <data:post.noNewCommentsText/></font>
      </div>
    </b:if>
  <b:else/>
    <b:if cond='data:post.allowComments'>
      <b:include data='post' name='addComments'/>
    </b:if>
  </b:if>
<b:else/>
  <div class='thread-locked-alert'>
    <svg viewBox='0 0 24 24'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>
    <font> Nhận xét đã bị vô hiệu hóa.</font>
  </div>
</b:if>

Bài đăng có nhận xét, thẻ <b:includable id='threadedComments' var='post'>, trong thẻ này có đoạn:

<b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='threadedCommentForm'/>
</b:if>

Bạn sửa thành:

<b:if cond='data:post.allowNewComments'>
  <b:include data='post' name='threadedCommentForm'/>
<b:else/>
  <div class='thread-locked-alert'>
    <svg viewBox='0 0 24 24'><path d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/></svg>
    <font> <data:post.noNewCommentsText/></font>
  </div>
</b:if>

Thêm css cho thông báo

.thread-locked-alert {
    background-color: #f2f6fb;
    margin: 20px 0;
    padding: 15px;
    position: relative;
    border: 1px solid #dadce0;
    border-radius: 3px;
    overflow-x: hidden;
}

Bạn lưu ý, khi bạn chọn Không cho phép, hiển thị liên kết hiện có thì bài đăng nào đã có nhận xét trước đó sẽ hiển thị liên kết trả lời reply comment do đó bạn cần làm ẩn liên kết này nhưng làm ẩn bằng cách nào? Mình sẽ hướng dẫn cách làm ẩn liên kết này như sau:

Trong thẻ <b:includable id='threadedComments' var='post'>, để ý bạn có thể thấy trong cặp thẻ này có một thẻ div bao quanh, bạn chỉ cần thêm thuộc tính sau đây vào:

expr:data-allow-comments='data:post.allowNewComments ? "true" : "false"'

Sau đó bạn sẽ thêm css như sau:

[data-allow-comments="false"] a.comment-reply{display:none}

Các liên kết reply comment sẽ bị ẩn


Thêm đánh giá

Trở thành người đầu tiên bình luận cho bài viết này!

Liên hệ Zalo