Hướng dẫn thêm nút xóa bài viết chuyên nghiệp cho Blogspot


Hello xin chào anh em :v hôm nay mình sẽ hướng dẫn anh em làm cái button Xóa Bài Viết cho blogger nhé :v xóa được luôn .-. script này mình ăn căp của blog nhỏ xíu xìu xiu kia kìa :v chứ không phải của mình nhé.

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>
Vậy là mềnh đã hướng dẫn xong cách tạo button deletepost chuyên nghiệp cho Blogspot :3 các bạn có copy ghi nguồn NguyenDienBlog.OOO hoặc Ketnoi369.Com càng tốt nhé :v
Nguồn : Lê Nguyễn Đình Diện

Viết bình luận (4)
Xếp theo