One of the things that many designers tend to leave out of their templates is the Quick Edit Pencil for posts. A lot of blog owners want it back as it is very useful to have and saves some time in getting back to the post you wish to edit.

There have been a lot of search results leading to the previous article about restoring quick edit links to widgets: How to Replace Quick Edit Links but they all came from searches for the Quick Edit Pencil.

For the pencil to appear below your posts when you are signed in to your account, three elements need to be present in the template:

1. An includable with the id 'postQuickEdit'.
2. The URL for the pencil image within the includable.
3. A <b:include with the name 'postQuickEdit'.

In one template I use 1 and 3 were there but 2 was missing. In another both 2 and 3 were missing. So restoring the pencil means searching your template code for each of the items and replacing whatever is required.

The obvious first step is to make sure that in Settings>Basic the quick editing is selected as in How to Replace Quick Edit Links. Then Download Full Template for safety’s sake and Expand Widget Templates.

1. Checking the URL

The first code section you need to find is the “includable”, so use the browser’s find/search to look for postQuickEdit. If the first thing you find is the<b:include then that is good news and probably means that probably only the URL is missing.

You are looking for this code section:

<b:includable id='postQuickEdit' var='post'>
<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>
</b:includable>

If this is what you find then you need to add the following URL after .editPostMsg> highlighted in blue.

<img alt='' class='icon-action' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif'width='18'/>

The resulting code should look like this with added URL in red:

</b:includable>
<b:includable id='postQuickEdit' var='post'>
<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' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
<span class='quick-edit-icon'>&#160;</span>
</a>
</span>
</b:if>
</b:includable>

The next step is to click on Preview to check that there are no coding errors. Do not be disappointed that you will not see the pencil in the preview because the preview is designed to show you how the blog will look to your readers. The quick edit links do not show in the preview.

Provided that there are no errors shown you can save the template and check to see if the Quick Edit Pencil is there. If the first item your search found was the postQuickEdit <b:include then it should be there and you are finished. If not then go on to section 3.

2. Restoring the Includable

Now it is unlikely that the whole includable is missing, as it is part of the basic Blogger setup. Normally only the URL is removed, but if somehow you cannot find the postQuickEdit includable you will need to look for the following two includables and paste it between them.

1. <b:includable id='feedLinksBody' var='links'>
2. <b:includable id='comments' var='post'>

Afterwards it will look like this with the code you have just pasted in red;

<b:includable id='feedLinksBody' var='links'>
<div class='feed-links'>
<data:feedLinksMsg/>
<b:loop values='data:links' var='f'>
<a class='feed-link' expr:href='data:f.url' expr:type='data:f.mimeType' target='_blank'><data:f.name/> (<data:f.feedType/>)</a>
</b:loop>
</div>
</b:includable>
<b:includable id='postQuickEdit' var='post'>
<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' height='18' src='http://www.blogger.com/img/icon18_edit_allbkg.gif' width='18'/>
<span class='quick-edit-icon'>&#160;</span>
</a>
</span>
</b:if>
</b:includable>
<b:includable id='comments' var='post'>
<div class='comments' id='comments'>
<a name='comments'/>
<b:if cond='data:post.allowComments'>
<h4>

I have not included all of the comments includable as it is quite long.

3. Restoring the include

If restoring the URL and, possibly the includable, has not worked then you will have to paste the following code section into your template:

<!-- quickedit pencil -->
<b:include data='post' name='postQuickEdit'/>

You may have to move the code a few times until you are satisfied with the position of the pencil. Therefore I would suggest that you leave the comment line in as it makes it easier to find this single line of code.

Because the designers can be quite creative with the positioning of the post elements, which is why we want these templates in the first place, you can’t rely on the Arrange Items section of the Configure Blog Posts window to place them. You will probably have to experiment a little with the code placement.

It should go in the post footer so look for (depending on the template) either a <div> or <p> tag with: class='post-footer-line post-footer-line-3'. Make sure it goes above this line then experiment a little until you are satisfied.

Hint: I have positioned it in this template so that it appears next to the email icon, which follows the RSS comment link.

<p><a expr:href='&quot;http://www.paulantczak.com/feeds/&quot; + data:post.id + &quot;/comments/default?alt=rss&quot;'>Subscribe to comments for this post (RSS)   </a>

<!-- email post links --> 
<b:if cond='data:post.emailPostUrl'> 
<span class='item-action'> 
<a expr:href='data:post.emailPostUrl' expr:title='data:top.emailPostMsg'>
<img alt='' class='icon-action' height='13' src='http://www.blogger.com/img/icon18_email.gif' width='18'/> 
<!--    <span class='email-post-icon'>&#160;</span> --> 
</a> 
</span> 
</b:if>

<!-- quickedit pencil --> 
<b:include data='post' name='postQuickEdit'/></p>

You will notice that I have placed both the email and pencil icons inside the <p> tags so that they all line up nicely.

Good luck. I hope that this will help you to restore the Quick Edit Pencil to your template.

Technorati Tags: Links,Templates,Customising

Subscribe to comments for this post (RSS)