How To Add Quick Edit Pencil Icon To The Custom Blogger Template

Now when you are login to the blogger and you open your blog you can edit any post as you can do it in Wordpress. You have to click on button to edit the post.

But sometimes this button is not visible. So here is a simple way to add this button.

1. Login to Blogger >> Settings >> Basic. Now scroll down and look for Show Quick Editing on your Blog? It should be Yes No .

2. Next go to Layout >> Page Elements. Look for Blog Posts and click on Edit below it.



The field before Show Quick Editing should be checked as follows.





Now save this. It should work now.

If above basic procedure not working for you then you have edit your template to add Quick Edit Button/Pencil to your blog posts.

1. Sign in to Blogger >> Layout >> Edit HTML >> Download Full Template >> Expand widget templates.

2. Now look following section of code is present or not.

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

<b:if cond='data:post.editUrl'>

<span expr:class='"item-control " + 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>

</b:includable>



If above code is present then half work done.



3. If above code is not present then Copy above code and then PASTE it before following code

b:includable id='postQuickEdit' var='post'

4. Now look for

<div class='post-footer-line post-footer-line-1'>

and add following code below it

<b:include data='post' name='postQuickEdit'/>



It will look like

<div class='post-footer-line post-footer-line-1'>

<b:include data='post' name='postQuickEdit'/>

</div>



You can also add above code to the below of

<data:post.body />

Save your template. It's done.

UPDATE

If still you can not get that pencil icon you will need further modification.

Look for 

data:post.editUrl'

Concentrate on following code

<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>

Just replace the red code with

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

Save Template