16 October 2018

How to Remove Quick Edit Wrench Icon in Blogger

Leave a Comment
You might have seen a number of quick edit links (small wrench-like icons) on your Blogger blog. They allows you to edit the blog post and widget (or gadget) settings directly from your blog web page.

Remove quick edit wrench icon in Blogger

You will see these quick edit links only when you are logged into your Blogger account. Sometimes, visitors may also see quick edit links on your blog if they aren't hidden.

Quick edits links are present in the source code of the web page along with the wrench icon png. They can affect your blog's loading speed, SEO and user interface (UI).

As you can alternatively edit the blog post and gadget settings from your Blogger layout page, so it's better to remove these quick edit links from your blog.

How to remove quick edit wrench links on Blogger


Follow this step-by-step guide to delete quick edit wrench links from your Blogger blog -
  1. Login to your Blogger Dashboard.
  2. Go to Template > Edit HTML.
  3. Click anywhere in the template editor and press CTRL+F shortcut key to open the search box.
  4. Now search the following code:
    <b:include name='quickedit'/>
    
  5. Replace every occurrence of the above code with this code:
    <!--b:include name="quickedit"/-->
    
  6. Finally, tap the "Save theme" button to save the changes. That's it.
In this method, we have changed the quick edit code into the HTML comment tag. Alternatively, you can delete all occurrence of code without changing them into comment tags.

If you would like to add back those quick edit links again, simply replace the edited comment tags with the previous code.

Hide quick edit wrench icons using CSS


You can also hide quick edit wrench icons using CSS. In this method, we are just hiding the icons, without actually removing them from the HTML. The quick edit links will still appear in the source code. Follow these steps -
  1. Login to your Blogger Dashboard and go to Template > Edit HTML.
  2. Click anywhere in the template editor and press CTRL+F key to open the search box.
  3. Now search the following code:
    ]]></b:skin>
  4. Just above ]]></b:skin>, add this CSS code:
    .quickedit{display:none;}
  5. Now tap the "Save theme" button.

How to remove blog post pencil edit icon


Sometimes, you will see a small pencil edit icon on the blog post widget. If you want to remove this icon, follow these steps -
  1. Login to your Blogger Dashboard and go to Layout section.
  2. Tap the edit link on the blog post widget.
  3. Now a pop up window will open. Untick the "Show Quick Editing" button and save the changes. That's it.
So that's how you can remove quick edit links and wrench icons from your Blogger blog. If you want to ask something about this tutorial, feel free to share it in the comment section.

Leave A Comment