Hướng dẫn chi tiết thêm button delete post chuyên nghiệp

Chào mừng các bạn đã đến với blog của mình.Hôm nay mình sẽ hướng dẫn chi tiết các bạn cách thêm button delete post khá chuyên nghiệp cho blogspot chỉ bằng một lượng nhỏ css mà js

Các bước thực hiện:

Bước 1: các bạn hãy tìm class post của bạn bằng cách f12 

• Hình ảnh trên là mình view ra từ chính blog của mình. Và class post của mình sẽ là .post-item

Tiếp theo bạn thêm đoạn id bên dưới vào code vừa tìm được

expr:id='"post-body-" + data:post.id'  

Sau đó , bạn thêm đoạn js bên dưới ngay sau nó 

<script>
$(document).ready(function() {
    $(&quot;a#delete-post-id-<data:post.id/>&quot;).click(function() {
        $(&quot;#post-body-<data:post.id/>&quot;).toggleClass(&quot;deleted&quot;);
      alert(&quot;Bài viết <data:post.title/> sẽ được xóa&quot;);
    });
});
</script>

Sau đó, bạn thêm code bên dưới vào chỗ mà bạn muốn đặt button xóa bài viết 

<a class='deleteposts' expr:id='&quot;delete-post-id-&quot; + data:post.id'>Xóa bài</a> 

Tiếp theo, ta chỉ cần thêm css làm màu cho cái button xóa bài đó 

<style>
  .deleteposts {
    background: #189dfe;
    font-family: &#39;Roboto&#39;,sans-serif!important;
    -webkit-box-shadow: 0 2px 5px rgba(52, 152, 219, 0.15);
    box-shadow: 0 2px 5px rgba(52, 152, 219, 0.15);
    border-radius: 20px;
    float: right;
    display: inline-block;
    border: 0 solid #e5e5e5;
    color: #fff!important;
    font-size: 14px;
    width: auto;
    border-radius: 20px;
    text-align: center;
    padding: 3px 9px;
    cursor: pointer;
    font-weight: 500;
    transition: all .5s ease;
}
  .deleted{display:none!important}
</style>

Lời kết:

Chỉ bằng một chút css và js tôi đã giúp các bạn tạo được button xóa bài viết tuyệt đẹp và chuyên nghiệp.Nếu thấy hay thì hãy chia sẻ để mọi người cùng biết tới nhé <3