Show Blogger Quick Edit Button For Each Post

I wonder why many of blogger templates these days don't include the Quick Edit button, every time I installed a new template then I won't find the nice editing wrapped with pencil image below title or post.

Actually the Quick Edit button is very useful, actually for a blogger like me that sometimes need to edit my published articles for several purposes, one of which is to recover from Panda hit. So with the absence of the feature forces me to search the post I want to edit inside the Blogger's dashboard.

It would be easier if there is a quick button in post, so every time we need to edit the article we published, we simply hit it then our browser will direct us to the writing page, in there we can make a needed modifications.

Well because of that then I conclude that I am not the only one, I believe there are many bloggers out there have similar habits as me. And they need to display the missing quick button for each of their posts.

So now I am here to elaborate to all of you the steps to show quick button for each of your posts.

How to show quick edit button for each post in Blogger

Firstly be sure that you have checked the show quick editing option in your Blog Posts gadet. Don't know where is it? Just go to Layout and then edit the Blog Posts gadget.

And then check the quick editing option.

When you have done checking the option. Now it's time to more advance steps that requires you to open your template HTML code. Here are the steps.

Remember to firstly backup your existing template before starting to apply the guides below.

1. First login to your Blogger.com, then select a blog in the list that you want to add the quick button.
2. Now go to Template -> Edit HTML and then find this tag.
   

   <b:includable id='comments' var='post'>

3. Once you found the tag, then place it the following lines of codes right below the above tag.
   <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://img2.blogblog.com/img/icon18_edit_allbkg.gif' width='18'/>
         </a>
       </span>
     </b:if>
   </b:includable>
   
4. Now find this tag:  <data:post.body/>, usually in each template has more than one tag like that. Then find the one that has this tag above it <b:if cond='data:blog.pageType == &quot;item&quot;'>. So it will look like this.
   <b:if cond='data:blog.pageType == &quot;item&quot;'><div id='PostBody'>
    <data:post.body/>
5. Now place this tag below the data:post.body tag.
   <b:include data='post' name='postQuickEdit'/>
6. Save your template. And then open of your article, see at the bottom of your post, you will find a pencil image.
7. Done.

Modifications.

You can also modify the image of the quick edit from the pencil to something you like. Just change the image URL http://img2.blogblog.com/img/icon18_edit_allbkg.gif with your own image URL. Make sure its format is gif.

Well you now have a quick edit button for each of your post in Blogger, you can easily edit any posts you think need to be edited.