How To add Comment delete Button on Blogger ?
-
DESKDemo-
SAMIRAvailable In Royal UI Or Plus UI
ReplyReply -
-
MUSTAKIMAwesome tutorial,, keep it upReply
Hello, Friends! In this post, I'll show you how to use the Blogger Comment Delete Button In Median UI.The delete comment feature in Blogger is a widget that lets the user delete comments by mistake. The delete comment feature on Blogger is very helpful for your blog.
In fact, you can use this feature in any Blogger template, but you need only a basic understanding of CSS and coding.
This Feature (Comment delete Button) also available in Plus UI And Royal UI- Blogger Template.
In the median UI template by default doesn't have a comment's delete button so,If you want to add Comment's delete Button on your blogger Website follow the guide below.
This Code Only Work On Median Ui
Adding Comment delete Button on Blogger:-
Make sure you have backed up the template before you start, just in case you make a mistake and need to restore it later!
Follow These Steps
.cmRi:checked ~ .cmRp .thTg::after{content:attr(aria-label)}
.thTg::before{content:'';width:28px;border-bottom:1px solid var(--widgetTac);opacity:.5}
.thTg::after{content:attr(data-text);margin:0 12px;opacity:.7}
.cmHl .thCh a.deleteCm{position:absolute;right:10px;top:0}
.cmHl a.deleteCm{position:absolute;right:20px;top:10px}
.cmHl .thCh a.deleteCm svg,.cmHl a.deleteCm svg{width:20px;stroke:#989b9f}
.thTg::after{content:'';right:0;left:10rem;width:calc(100% - 13rem);border-bottom:1px solid var(--widgetTac);opacity:.5;position:absolute}
.thTg::before{content:attr(data-text);margin:0 12px;opacity:.7}
.cmRi:checked ~ .cmRp .thTg::before{content:attr(aria-label)}
.thCh > li:first-of-type:before{content:'';border:0}
.thCh > li:before{content:'';position:absolute;width:calc(100% - 3.8rem);border-top:1px solid var(--widgetTac);opacity:.5;left:20px;margin-top:-10px}
<li class='c' expr:id='"c" + data:commentLevel1.id'>
<li class='c' expr:id='"c" + data:commentLevel1.id'> <a aria-label='Delete' class='deleteCm' expr:href='"https://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&postID=" + data:commentLevel1.id' rel='nofollow noopener noreffer' target='_blank'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'/><line x1='16.8651429' x2='0.714666667' y1='4.47980952' y2='4.47980952'/><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'/></g></svg> </a>
<!-- Find this code --> <li class='c' expr:id='"c" + data:commentLevel2.id'> <!-- Change to --> <li class='c' expr:id='"c" + data:commentLevel2.id'> <a aria-label='Delete' class='deleteCm' expr:href='"https://www.blogger.com/delete-comment.g?blogID=" + data:blog.blogId + "&postID=" + data:commentLevel2.id' rel='nofollow noopener noreffer' target='_blank'><svg class='line' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><g transform='translate(3.500000, 2.000000)'><path d='M15.3891429,7.55409524 C15.3891429,15.5731429 16.5434286,19.1979048 8.77961905,19.1979048 C1.01485714,19.1979048 2.19295238,15.5731429 2.19295238,7.55409524'/><line x1='16.8651429' x2='0.714666667' y1='4.47980952' y2='4.47980952'/><path d='M12.2148571,4.47980952 C12.2148571,4.47980952 12.7434286,0.714095238 8.78914286,0.714095238 C4.83580952,0.714095238 5.36438095,4.47980952 5.36438095,4.47980952'/></g></svg> </a>
Step 8:-Finaly Click onSave HTML And Done
Conclusion
Code Owner:
Wendy Code
