Thursday, June 21, 2012

How To Remove Quickedit Pencil & Wrench Icons From Blogger Blogs

The Pencil/ Wrench icons are added to Blogger blogs by Google to make blogging easier. By using this, you acn easily edit widgets and posts in just one click from your blog without going to blogger account (only if you are logged in with the blog's admin privilages). But for most Bloggers they feel discomfort with these Quickedit icons. The template also looks very bad. So, many users have asked me how to get rid of these things from their template. Actually it is very easy to remove those wrench icons. Just a simple CSS trick can do this. So read below.


Remove Quick Edit Icon

If you analyze your template code. You can see a code
<b:include name='quickedit'/>
Actually this is your problem. This code adds Quickedit icons to every place where this cod exists. To remove quickedit icons manually for selected position of your blog, just remove these code from that position. Blogger automatically ads Quickedit icons to every new widgets you adds. So if you want to remove all icons, removing all occurrences of the above code is not a good solution. So, you can try the easy CSS trick method instead.

Easy Method



So if you want all icons to be removed and it never wants to add again, Do as below.

1) Log In to blogger

2) Go to Design > Edit HTML
Don't forget to tick "Expand Widgets"

3) Backup your Template

Either you can click download full template from top or copy your entire template code and save it as something.xml file. This is extremely important when editing template. If you had any problems on editing template, it cannot be reverted. So, always keep a backup. In this case, I'm sure that there will be no errors as it is a simple code. Nut it is good make it a habbit to avoid accidental loss.


4) Adding code
Just scroll down in your template code and you can see many CSS tags. (for example #header) 
Just add the below code there. Don't add it inside a CSS code. It is better to add at the bottom. Add the following code just above <b:skin>
.quickedit{display:none;}
5) Now save the template and see the changes!
Find us on Google+
Bloggers.com