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.
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):
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.

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='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </span>
</a>
</span>
</b:if>
<span expr:class='"item-control " + data:post.adminClass'>
<a expr:href='data:post.editUrl' expr:title='data:top.editPostMsg'>
<span class='quick-edit-icon'> </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='"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>
<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>
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.


10 comments:
Thanks for excellent tip!
Thanks, this worked.
wow it's very easy. it work for me
It worked! I can't thank you enough for sharing this tip!
Note: you won't see the pencil in "Preview" mode. Just mentioning that, because that threw me off for a little bit. :)
FINALLY worked for me. Thanks!
And a special thanks to Dragonetta for the "Preview" tip. It didn't show up for me either until I saved and Viewed Blog.
@ Meggy
You're very welcome! Glad I helped! :)
BTW, I found out a little something else: what's really important to remember also is to allow third-party cookies. When all else fails, that WILL make the pencil show up.
Thanks now i have easy step to edit posting
http://freewarehomes.blogspot.com/
After trying many sugestions from across the web, THIS ONE WORKED! Thank you so much.
Your writing is VERY CLEAR and easy to understand. The use of the colors to confirm which lines of code you are editing is SUPER helpful.
I could kiss you!
I have been looking for help on this for the longest time. Was even considering removing my theme just to be able to use the edit button. I hated going threough the customize link in the Navigational bar just to find the edit posts section.
Thank you verrrry much!
Pencil Edit fix much appreciated. Thank you!
By the way, do you happen to have a solution for doing the same for the "reaction buttons" that also seem to be missing from my blog and XML code?
Would really appreciate it if you could aid me in solving this one too..
I have linked a post on my blog to your pencil fix - will link to you for a reactions fix as well.
Agin - My Thanks!
"Jots" - aka Sela
Post a Comment