Hide Edit Widget Controls in Blogger

If you use the new Blogger templates, those will by default insert a little widget control in various places of your pages to allow you to edit those page elements. These look like this:

Handy for editing the layout of your page but perhaps you don't need that convenience and find these icons unattractive or distracting.

Using the Blogger menus you can't remove this from your pages. If you don't want to display these icons, you have to edit the HTML template that is used to generate your blog pages.

One way is to look for the code in the HTML template that generates these controls. This code looks like:

<b:include name='quickedit'/>

If you don't want these to be displayed, you can either remove them or use HTML comments to comment them out.

<!-- <b:include name='quickedit'/> -->

The other way is to use CSS to tell your browser not to display these widgets. When the pages are generated, they are wrapped in HTML spans

<span class='widget-item-control'>...</span>

This can be hidden by adding a CSS element in the form of


span.widget-item-control{
 display:none;
}

No comments: