How To add Comment delete Button on Blogger

Hello Friends in this post I am going to Share about How To add Comment delete Button on Blogger in Median UI.Comment's delete feature in Blogger is a widget where user can delete by mistake comments Himself.Comment's delete Feature Very useful in your blog on Blogger

Actually You can apply this feature in any Blogger Template but you have to little knowledge about CSS and Coding

This Feature (Comment delete Button) also available in Professional Web Designer- Deo's Blogger Template Plus UI..

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

Demo

also read this post :

• How To Remove '?m=1' From Blogger
• How to add Lightbox images In blogger
• How To add Google Translate Widget in Your Blogger Website
• How To Add Bookmark Post widget on blogger

Adding Comment delete Button on Blogger:-

before starting make sure you have backed up the template By chance, in case if mistake has been done you can restore it later!

Follow These Steps

Step 1:- Go To Blogger.com

Step 2:- Login To Your Account

Step 3:- Now Click on Theme Option

Step 4:- And then click  this button⏷ Near Customise

Step 5:- Now Click Edit HTML

Step 6:- Then Find 3 css Code Below and Then Remove one by one

.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}

Step 7:- after you delete all 3 CSS code Then Find this code ]]></b:skin> and paste the CSS code after

.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}

Step 7:- Now Find These Two Code One By One Replace Carefully

<li class='c' expr:id='&quot;c&quot; + data:commentLevel1.id'>

<li class='c' expr:id='&quot;c&quot; + data:commentLevel1.id'>
<a aria-label='Delete' class='deleteCm' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + 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='&quot;c&quot; + data:commentLevel2.id'>
  
  
  <!-- Change to -->
  
  <li class='c' expr:id='&quot;c&quot; + data:commentLevel2.id'>
<a aria-label='Delete' class='deleteCm' expr:href='&quot;https://www.blogger.com/delete-comment.g?blogID=&quot; + data:blog.blogId + &quot;&amp;postID=&quot; + 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:-

So My Dear Freinds, In this post, I shared How To add Comment delete Button on Blogger. I hope this method of creating Comment's Delete Button in blogger can be very useful for you and your blog. Thank you for visiting our website.

Reference:
Wendy Code

Go to Link