Image
Dida
Administrator
Author
Last edited:

Did you make a mistake while creating your own Blogger theme, and now the comment delete function is no longer showing as it used to? Or perhaps you installed a theme from another developer, but there’s no delete button for comments? However, when you added the delete button, it appeared for all comments.

Don’t worry! In this tutorial, you’ll learn how to hide or show the Blogger comment delete button so that it only appears for the appropriate users.

  • For users who are logged in to their Google Account, the delete button will only appear on their own comments, allowing them to delete their own comments.
  • For the blog Admin, the delete button will appear on all comments. This allows the Admin to monitor and delete comments directly without having to go through the Blogger Dashboard.
  • If someone comments as Anonymous, the delete button will not be shown.
Show or Hide Comment Delete Button in Blogger

How Blogger Handles Comments

Before making any changes, it’s important to understand how Blogger processes comments internally. Blogger uses a system of conditional tags within its XML structure to determine which elements should be displayed to different users. These conditions allow the platform to identify whether the person viewing the page is the site administrator or the author of a specific comment.

Each comment is stored as a data object, typically referenced as data:comment. This object contains useful information about the comment, including permission-related details. To control the delete button, we rely on two key variables:
  • data:comment.adminClass: identifies the blog administrator.
  • data:comment.deleteUrl: contains the URL used to delete a specific comment.
However, in this method, we will use data:item.deleteUrl instead. We will replace the comment reference with item. This approach allows you to avoid adding a separate delete button to every individual comment. Learn more about how to add an Admin Badge on Blogger.

Important: Always create a backup of your Blogger theme before editing the XML. This allows you to restore your site if something goes wrong during the editing process.

Step 1: Add CSS

If your theme or template hasn’t deleted this CSS rule, .item-control {display: none;}, you can skip this step.

  1. In the Blogger Dashboard, go to Theme
  2. Click the down arrow next to the Customize button, select Edit HTML
  3. Click anywhere inside the HTML editor and press Ctrl + F
  4. Search for: ]]></b:skin> or </style>
  5. Just before the closing tag, insert the following CSS: 
    .item-control{display: none;}

Step 2: Add Blogger XML

Begin by locating the delete button component in your theme.

  1. Search for: id='commentDeleteIcon'
  2. If it exists, replace the entire <b:includable> block with the updated version. 
    <b:includable id='commentDeleteIcon' var='item'>
   <b:if cond='data:item.deleteUrl'>
   <div expr:class='&quot;item-control &quot; + data:item.adminClass'>
   <a aria-label='Delete' class='comment-delete' expr:href='data:item.deleteUrl' expr:title='data:messages.deleteComment'>
   <i class='fa-regular fa-trash-can'/> Delete</a>
   </div>
   </b:if>
</b:includable>

    You can change this icon <i class='fa-regular fa-trash-can'/> to your preferences.

Step 3: Insert the Delete Button into the Comment Loop

Now, you need to define where the Delete button will appear within each comment. Normally, it is placed next to the Reply button.

  1. Search for the comment loop, which is usually written as: <b:loop values='data:post.comments' var='comment'>
  2. Locate the section where your comment-footer or Reply button is displayed.
  3. Insert the include line for the Delete button within that section. 
    <b:include data='cmt' name='commentDeleteIcon'/>
    Locate the reply button
  4. Click Save

After saving your changes, it’s important to test everything thoroughly to ensure it works correctly under different conditions.

  1. Admin Test: Log in as the blog owner and check multiple comments. The delete button should appear on all of them.
  2. User Test: Log in with a different Google account and post a comment. You should only see the delete button on your own comment.
  3. Anonymous Test: Open your site in Incognito mode. No delete buttons should be visible.

If something is wrong and the delete function is not behaving as expected, go to Step 4.

Step 4: Match the Correct Variable Name

This is one of the most critical steps and a common source of errors. Different themes may use different variable names for comments.

For example:

  • If your loop uses var='comment', var='commentLevel1' or var='cd.level', you must use that exact name in your include tag.
    • <b:include data='comment' name='commentDeleteIcon'/>

If the variable name does not match, Blogger will not recognize the comment data, and the delete button will not appear.

Common Mistakes to Avoid

Even minor mistakes can cause your delete button to stop working. Here are some common issues to watch for:

  • Removing data:comment.deleteUrl: Doing so will completely disable the delete functionality.
  • Skipping Conditional Checks: Without the appropriate <b:if> conditions, the delete button may be displayed to everyone.
  • Editing the Wrong Section: Make sure you are modifying the correct comment block or includable.
  • Using Incorrect Variable Names: Always use the exact loop variable when referencing comment data.

If you're having a hard time or it's still not working, feel free to describe the problem and share a link to your website so I can see how you did it. Please remember to use the link tool in the comments so your comment doesn’t get removed as spam.

Insert Link and Parse

Also read: