Notifications
All Notifications

How To add Comment delete Button on Blogger ?

How To Add Comment's delete button In Blogger

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

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 on Save HTML And Done


Conclusion

Hope this How To add Comment delete Button on Blogger ? tutorial will be useful to you, if you have any doubts related to this article ask me in the comments, and do share with your friends, Thanks for visiting, Have a nice day!

Code Owner:
Wendy Code

Blogger Code CSS HTML Widget
SAMIR
SAMIR
Hey ! My name is Samir, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Feni,Dagonbhuiyan,Bangladesh. I love to Code and create interesting things while playing with it.

Facebook ID Telegram ID
Join the conversation (3)
3 comments
  1. MUSTAKIM
    11 February, 2023
    Profile
    MUSTAKIM
    MUSTAKIM
    This Person Said: Awesome tutorial,, keep it up
    Awesome tutorial,, keep it up
  2. DESK
    11 February, 2023
    Profile
    DESK
    DESK
    This Person Said: Demo
    Demo