How to Add the Quick Edit 'Pencil' Button?

The top image shows the Quick Edit button (the yellow pencil) in a blog post. Some of the older templates provided here don't have the Pencil button on even if you opted it to be on from the Layout page.

There are 2 things you have to do to turn on the Pencil button.

1. Modify the XML code
Here's what to add in the XML code so you can have the Pencil shows up on your blog posts when you're logged in, to make it easier for you to edit the posts.

If you're editing the XML code online from the Blogger Layout > Edit HTML page, make sure you click on the Expand Widget Templates box.

Inside the XML (or HTML) code, search for the string 'data:post.editUrl'. The code section should look something like this if you don't have the Pencil button on.

<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'>&#160;</span>
</a>
</span>
</b:if>

To turn on the Pencil button, replace the red line on the code above with the blue line from the code below (as you can see, the rest of the codes remain the same):

<b:if cond='data:post.editUrl'>
<span expr:class='&quot;item-control &quot; + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<img alt='' class='icon-action' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'/>
</a>
</span>
</b:if>

2. Select the Quick Edit Button
Go to your Layout > Page Elements > Blog Posts Edit tab, and click on the Show Quick Editing box to turn it on. That's it.

 Subscribe