112 How to add Quick Edit Pencil to Blogger Posts
July 16, 2008 /

The "Quick Edit" pencil icon provides a link to edit our blog posts while viewing blog pages in our browser.

This function is always present in Blogger's default templates. However, if you have customized your template or are using a non-standard template, you may notice this function is missing from your blog pages.

In this quick tutorial, I'll explain how you can check if the "Quick Edit" function is present in your blog template, and how this can be restored if you find it's missing.



Check the quick edit settings

The first thing we should do is check that the quick editing is activated in your blog's settings. To check this, go to Settings>Basic in your Blogger dashboard and scroll down to the section which says "Show quick editing on your blog".


You should ensure this option is set to "yes" and save this setting.

Then go to Layout>Page Elements in your Blogger dashboard, and click on the "edit" link for the Blog Posts widget.

On this pop-up page, you should ensure you have checked the "Show quick editing" option which enables you to quickly edit your blog posts.





Check if the required code is present in the template


Next we need to check if the code required to make these icons appear is still present in your template.

To find out, go to Layout>Edit HTML in your Blogger dashboard. Check the "Expand widget templates" box, then search for this section of code:


<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>
The easiest way to locate this section is to use your browser's search function and find the following phrase:

b:includable id='postQuickEdit' var='post'
If this section of code is present in your template, you're already halfway towards adding those quick edit icons again.

If this section of code is not present in your template, you will need to copy the entire b:includable section above, then paste this just before the following line of code in your template:

<b:includable id='comments' var='post'>
Once you are sure that this code is present in your template, you need to add a simple line of code to the posts section where you would like your quick edit icon to appear:

<b:include data='post' name='postQuickEdit'/>
In this template, my quick edit icon is located in the "post-footer" section, like this:

<div class='post-footer-line post-footer-line-1'>
<b:include data='post' name='postQuickEdit'/>
</div>
If  the "post-footer-line" section is not present in your own Blogger template, you may prefer to add the quickedit code just after this line instead:

<data:post.body />
Once you have added this line of code, preview your template. The quickedit icons will not appear in the preview, but if you have made any errors during these changes, the preview will make you aware of this.

Finally, you can proceed to saving your template. Then view your blog in your browser. Your quick edit icons should now appear below each of your blog posts which allows you to easily edit posts when you are logged in to your Blogger account.


Did this work for you?

I hope this tutorial has enabled you to restore missing quick edit pencil icons for your Blogger posts with the minimum of fuss!

Please let me know if this tutorial has been useful for you by leaving your comments and opinions below.

Author: Amanda Kennedy

Amanda is a professional blogger and web designer living in Sheffield, United Kingdom.

In addition to curating Blogger Buster, you can find Amanda on Twitter, Facebook or add her to your circle on Google+.

Like to share?

You may also like to subscribe to Blogger Buster's RSS feed or receive free email updates of our latest posts.

112 comments:

  1. I am using the harry potter themed template... it didn't work :(
    -----------------------------------------------
    Blogger Template Style
    Name: Magical
    Designer: Amanda @ Blogger Buster
    URL: www.bloggerbuster.com
    Date: 21 Aug 2007
    -----------------------------------------------
    any help with this one would be nice :)

    ReplyDelete
  2. Hi Amanda
    It only worked for one of my templates. Good work though :)

    ReplyDelete
  3. Hi Amanda,
    I really want to do this to my blog. But I can't reach the edit button of the blog widget in layout page. It is overlapped by the sidebar widget. What can I do?

    ReplyDelete
  4. Amanda, I had the same problem and I found that is just to put the image link after "expr:title='data:top.editPostMsg'>", and it worked with message icon too.

    I took these icon links from a fresh blogger template.

    ReplyDelete
  5. I can get the pencil edit button... but it seems that the widget edit button is visible on the site even when I'm not logged in.

    How do I get rid of that?

    ReplyDelete
  6. I don't have the [b:includable id='comments' var='post'] line in my template. I'm using your Ninja template -- what is the equivalent?

    ReplyDelete
  7. Yay!!! It worked! Thanks Amanda!

    ReplyDelete
  8. Hi Amanda,
    I really want to do this to my blog. But I can't reach the edit button of the blog widget in layout page. It is overlapped by the sidebar widget. What can I do?

    ReplyDelete
  9. hi amanda,

    my blog robot.txt file showing this-

    User-agent: Mediapartners-Google
    Disallow:

    User-agent: *
    Disallow: /search

    can you please suggest me, how can i edit it. or you know any method for changing robot.txt file. plz help me.

    ReplyDelete
  10. Thanks for posting this. I've been trying to get this to work for a long time. Unfortunately, this solution didn't work for me either. I had the code you'd posted. I just added this - b:includable id='comments' var='post' to my comment footer. Did not work. Tried posting it elsewhere in the footer, even the post header and other places. Didn't work. Tried checking in both firefox and IE. Can't see it. But thanks for your efforts!

    ReplyDelete
  11. Didn't work for me - does it work with XML as well as HTML?

    ReplyDelete
  12. This comment has been removed by the author.

    ReplyDelete
  13. This comment has been removed by the author.

    ReplyDelete
  14. I read through your tutorial. The code is present in my template, but the image still does not show up. Any ideas?

    ReplyDelete
  15. I had the code already included, so I tried adding the line both ways you suggested but neither worked.

    ReplyDelete
  16. Amanda,
    Keep up the great work here. It's nice to see another blogger trying to show, well, Blogger's potential. It takes a lot of hackery and patience, but I know first hand that Google's hosting service can be made to look just as nice as Wordpress- and for free! (Although my blog isn't nearly as pretty as yours, I've still tried ti spiff it up as much as possible!)

    One thing I haven't bee able to make work just yet is the new inline comments in Blogger Draft. I love the way they look on this template and that gives me incentive to take another crack at it. Too bad it's never straightforward for custom themes...


    Daniel Smith
    Smithereens Blog
    Productivity, Persuasion and Prose

    ReplyDelete
  17. Thank You!
    It works very vell

    ReplyDelete
  18. I'm trying this on a template I got from another site. So far I got no errors after each step, but the icon still doesn't appear.

    My code doesn't have the link to the pencil icon though, it might have something to do with that. I'll try it again :)

    ReplyDelete
  19. Nice post Amanda and thank you for sharing this..

    ReplyDelete
  20. Please get well soon Amanda... and do take care of yourself and your back! :)

    ReplyDelete
  21. Hi. I just wanted to let you know I nominated this blog for an award. Enjoy!

    http://reviewingwhatever.blogspot.com/2008/07/award-meme.html

    ReplyDelete
  22. Exact same story for me as with ABookworm. But thanks SO much for your efforts, Amanda. The disappeared edit pencil has bugged me for some time now. I'll keep fiddling around with it, though. :-)

    ReplyDelete
  23. I just tried what Cidão said and all my content disappeared! Luckily I reverted back to my previous code and it all came back. Whew!

    ReplyDelete
  24. No problems in this side. I was missing that little pencil and I hadn't realize what piece of code I was missing. Useful indeed!

    -TonNet

    ReplyDelete
  25. Thank you for this tutorial. Anyway if you dont mind, can we trading link? thank you so much

    ReplyDelete
  26. Thanks for sharing this tip. I have been searching for this information over the internet.

    www.simplewayoflife.net

    ReplyDelete
  27. Couldn't find those tags

    ReplyDelete
  28. I have done all the tweaks but it did not show up on my blog.. thanks for this trick anyways..

    ReplyDelete
  29. Didn't work for me :( Any way I can get it to work? Help!

    ReplyDelete
  30. If you have a similar code section to the first one Amanda mentioned, DELETE that one and replace it with the one she provided. Do that first. Then save your template and check if the quick edit button is there.

    Do not repeat the next steps until you have checked that the quick edit button is still missing after doing the above.

    ReplyDelete
  31. i followed ur tutorial but i still cant see the quick edit button... :( help...

    ReplyDelete
  32. hey toan, thx 4 de tips... ^.^

    ReplyDelete
  33. Have been looking for ages how to get it back, and now it works again. Love u!

    ReplyDelete
  34. I followed the instructions and found that the required settings and code were already there, but the links still didn't show up in Firefox. In my case, it was a cookie problem. In Firefox, go to Tools>Options>Privacy tab and make sure "Accept third-party cookies" is checked. Works fine now.

    ReplyDelete
  35. It didn't work at all for my template at all, thank God! It took me almost one hour to figure it out, it's not putting the codes after what you said, but
    ******************
    search for an indented block that starts with a following line:
    if cond='data:post.emailPostUrl
    and place that code
    right after the whole block, not the first line of it, just before the line.
    (http://cranked.me/2008/05/how-to-make-quick-edit-pencil-icon.html)
    ***********
    Hope to save your time, buddies!

    ReplyDelete
  36. search for an indented block that starts with a following line:
    if cond='data:post.emailPostUrl
    and place the codes right after the whole block, not the first line of it.
    (http://cranked.me/2008/05/how-to-make-quick-edit-pencil-icon.html)

    ReplyDelete
  37. Thanks nm - the cookie trick worked for me!

    ReplyDelete
  38. Hey :)
    I'm using the same template as Bawa, and I got it from your site... the 'Magical' Harry Potter one, and it did not work for me either.

    ReplyDelete
  39. Worked for me too. Thanks very much.

    ReplyDelete
  40. Did not work for me. After spending 3 hours trying every solution proposed, I finally found that it was Norton that was blocking the Quick Edits. If you have Norton, disable it and the Quick Edit pencil will show up immediately.

    ReplyDelete
  41. It worked for me. Thanks a lot!

    ReplyDelete
  42. Thanks to NM!!! She posted this:
    I followed the instructions and found that the required settings and code were already there, but the links still didn't show up in Firefox. In my case, it was a cookie problem. In Firefox, go to Tools>Options>Privacy tab and make sure "Accept third-party cookies" is checked. Works fine now.
    This worked for ME, as well as a few others! Whod've Thunk!?!?!

    ReplyDelete
  43. Yes, worked for me. This line was missing in my new template:

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

    Thank you very much!

    ReplyDelete
  44. Worked for me. You rock!

    ReplyDelete
  45. If I enable third-party cookies, it works for me, but I don't want third-party cookies enabled. Is there any way to enable *some* third-party cookies?

    ReplyDelete
  46. It works for me. Though the placement of the line to get the QuickEdit is a bit tricky depending on each own templates. I put the line just before this code:

    < div class='post-header-line-1'/ >

    Because it suits better there.

    Check it out at:
    http://premiumtricks.blogspot.com/

    Thanks!

    ReplyDelete
  47. A crawler (or spider) is a program which is designed to visit a web site and determine the content of that site. It does this by following all of the links and branches throughout that site and pulling relevant keywords from the pages.

    ReplyDelete
  48. My quick edit button wasn't showing up in my template (Minimalist E) and I couldn't figure out why because it looked like all the code was there. After reading this, I had a "d'oh!" moment when I realized the template author just neglected to display the icon! (Everything was there except the img tag.) So, thanks - this worked for me.

    ReplyDelete
  49. Help! The problem for me is that this conditional statement
    if cond='data:post.editUrl'

    returns false! Which means that my editUrl is empty. If I remove the "if" statement, the quickedit icon appears but clicking the icon only redirects me to the main page of my site.

    Hope you can help me solve this problem.
    Thank you

    ReplyDelete
  50. Hi Amanda !

    I am using Falkner-Press theme from bloggertricks.com
    I have done this trick but it doesn't work. Please help me...Please....Please
    My Blog

    xtremecircuits.blogspot.com (under construction)

    My Email ID

    izhar@gmx.com

    Please help !

    King Regards
    Izhar Fareed

    ReplyDelete
  51. I found the pieces of code in the right places and settings where right too. But it didn't work.
    Some extra searching learned me it had to do with cookies. The problem was the same like the one NM wrote about. I didn't had my cookies settings right. Except 3rd-party cookie wasn't checked.

    Maybe you should mention this in your tutorial. Except for that minor remark your explanation is very clear and easy to understand.
    Thanks.

    ReplyDelete
  52. Hello... i got it... its realy fuckeable... i cant believe how a theme can be so bad elaborated.

    Im using CRYSTAL BLUE THEME... and its realy hateable when i want to use quickedit.

    To get this i had to add this code:
    ***b:include data='post' name='postQuickEdit'/***

    .... this other code:
    ***data:post.body/***

    And its realy working.

    But it takes a bad position on view.. jeje.. it appears on last letter of my posts. jejejeje... but i dont care, im the only one posting on my blog.

    I hope good times for everybody... ciao

    THANX A LOT AMANDA....

    ReplyDelete
  53. Hello Amanda - Thank you so much for helping me direct my search for the missing Quick Edit pencil. I found the code for the pencil in Aspire, scrolled down to editPostMag, removed the code that followed and replaced it with your line beginning with img alt. It worked - with a very small glitch: the pencil is positioned at the beginning of the post which, because only I will see it, is not a bother. Would like it at the end but I am not going to tempt fate.
    You put me on the right path for which I heap praise upon you. Thanks, and again thanks - Gordon

    ReplyDelete
  54. it didn't worked for me also please help me out

    ReplyDelete
  55. I have all the setting and all the code exactly as you have mentioned, but I still don't see the quick edit icon. I'm using the template available here:

    http://www.deluxetemplates.net/search?q=statement

    The template has all the items such as date, labels, number of comments etc. right below the title. There's absolutely nothing in the page footer though the template shows all the footer code. I think the template has got something to disable all the content in the footer. I just can't figure it out.

    I'll really appreciate if you could have a quick look at the template to see if you find something wrong.

    Thanks.

    ReplyDelete
  56. Well the problem is that this doens't work to edit the blog's posts in the blog itself. But here's the code to the old blogger templates: <$BlogItemControl$> Just put this wherever you want the quick edit pencil/link to appear... But still doens't work to edit a long text in the blog page (i don't know if it works in the new templates...).

    ReplyDelete
  57. I used to have the pencil until I changed my blogger acct over to a .com acct. Everything else is the same...using google, but the pencil doesn't show up anymore, even when I followed the tut. Interesting.

    ReplyDelete
  58. I had to copy the main code from an active blog where it was working and then place the 'location' of the quickEdit variable between my MetaData and my Labels, but I FINALLY got this to work! YAY!

    ReplyDelete
  59. Interestingly, a couple of weeks later, TWO pencils now appear, LOL! I'm assuming maybe blogger was just having problems back then.
    Oh, well. I can live with two pencils. No biggie.

    ReplyDelete
  60. i try your technique but the quick edit pencil not show please help me solve the problem
    http://search-engine-optimization-clues.blogspot.com

    when i using the technique to other blog quick edit pencil can add with this tips http://registry--editor.blogspot.com/

    ReplyDelete
  61. This tip didn't help in my case.
    But I found that a problem was in the custom settings of the browser: quick-edit icon disappeared when referrer information sending is disabled. Enabled referrer for 'http' protocol has returned icon back. Maybe it will help for someone.

    ReplyDelete
  62. Fantastic, great, Well said, got it, thanks a lot.
    I admire you.

    ReplyDelete
  63. Worked for me. I had the same issue as Gordon. I'm working on an old Aspire template too and the pencil appeared next to the post title, but I found that the second bit of code

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

    Was already in the H1 section. I moved it to right after

    data:post.body

    and it's perfect now.

    Thanks!

    ReplyDelete
  64. Thanks, but there's nothing on the Dashboard that says "Layout" or "Edit HTML" so it's impossible for me to follow these instructions

    ReplyDelete
  65. Sadly, after a half day spent on this, it just will not work for me. I already had all the coding that you show, I've followed each & every step all the way thru (from resetting widgets, resetting the post template, clearing cache, reverting widget template to default, etc.), but am still missing my Pencil Icon. I USED to have this Pencil icon for Quick Editing and I'm not sure when it disappeared from my blog (not too long ago!!). I absolutely loved it and used it all the time. FYI-I am using IE9, my blog/site is directed to http://www.glendascreativeplace.com.

    If you have ANY other suggestions, I would love to hear them. I am hesitant to do too much more to my blog on my own, since I am not someone who does anything more than VERY basic coding (for HTML or CSS) and since this is my business site, I can't afford to lose any of it. Ideas??
    Thanks so much.

    ReplyDelete
  66. I got a good experience about how to do the quick edit pencil to blogger postes,I got an idea to do in easier way,so I can improve my posting ability. Thank you so much by providing this.Nice to visit here.

    ReplyDelete
  67. Didn't work for my custom theme.. :(

    It has additional line :

    <.span class='quick-edit-icon'> 

    I guess its not making it work..

    ReplyDelete
  68. This comment has been removed by the author.

    ReplyDelete
  69. thankz a lot .juss working nicely on my blog

    ReplyDelete
  70. Just tried it!! I had to put it before ,..... and since there were 4 in my code, I tested all the spots, finding the one that worked! Thanks a lot!!!!

    ReplyDelete
  71. Thanks Its working thanks for your tutorial

    ReplyDelete
  72. thank you! I was trying to add another quick link last night and lost my pencil! I appreciate it so much!

    ReplyDelete
  73. The edit buttons are not showing on the blog though all the above lines of code is present in the template.

    This has occured since the blogger changed its address from *.com to *.region

    Please help

    ReplyDelete
  74. ^ All the code is present for me too, but the edit pencil is still not showing.

    ReplyDelete
  75. I would LOVE to see an update on this! I'm having the same issues Aalunga above is having re: the region blogger update. Hasn't worked since!

    Thanks!
    Donna

    ReplyDelete
  76. Found a fix.

    It's a redirecting issue. If you change your blog url to read .com/ncr the tools show up again!

    You may have to do this every time you load your blog, but it's working!

    ReplyDelete
  77. I have the code there but its still missing, but I don't see why we need to fix this problem ourselves, this issue has happened a lot and Blogger should be fixing this not us! Going into the code is risky since we are not experts and we could ruin our blogs if we get it wrong.

    PS I really HATE this new format they have with comments, awful:(

    ReplyDelete
  78. I did nothing to my setting in any way, yet about a week ago, I lost the quick edit feature as well. I agree with Jane, why is this something we have to do at all. For heavens sake blogger...fix it!

    ReplyDelete
  79. thanks man....i applied it just after post title...working great....

    ReplyDelete
  80. hey thanx for providing the code. but unfortunately it didnt work for me :(
    Thnk you anyways. my blog- www.theepiblogs.blogspot.com

    ReplyDelete
  81. Thanks for sharing Interesting post. Thanks for taking this opportunity to discuss this, I appreciate with this and I like learning about this subject. If possible, as you gain information, please update this blog with more information. I have found it really useful.

    ReplyDelete
  82. Thanks for sharing this helpful tutorial.

    ReplyDelete
  83. After I added your code. The website give me such error message:
    TEMPLATE ERROR: Unknown runtime binding: includable in widget

    I think the new version of blogger is totally different...

    Is there any newest method that we can add edit button in page view mode?

    ReplyDelete
  84. Well... that's interesting but to be honest i have a hard time figuring it... wonder how others think about this..

    ReplyDelete
  85. ADS-1S is a Full-line vehicles fault diagnostic scanner system, which is based on pc desktop and laptop platform. It can test cars manufactured in Asia, America and Europe countries. It supports all kinds of vehicle communication modes.feng

    ReplyDelete
  86. I was searching for the same. Thanks for this Tutorial

    ReplyDelete
  87. Thank you for this well-written tutorial. It worked great for me.

    ReplyDelete
  88. Thank you master, I just did this and it work!

    ReplyDelete
  89. Oh man, this is the best post I’ve ever seen one, you too much in the same theme may include views. I am still in your next post from you some interesting ideas waiting.

    ReplyDelete
  90. Great content and great layout. Your website deserves all of the positive feedback it’s been getting.

    ReplyDelete
  91. Your post is good. I like style of your writing. So I got pleasure reading it. Thanks a lot!

    ReplyDelete
  92. Agreed. When it’s left to the media to arbitrarily decide which issues deserve attention, it can often encourage conflict between competing “issues” that ultimately serves the status quo. A better approach, of course, would be solidarity between all parties, but that’s easier said than done!
    http://www.horsebaktour.com |

    www.ecohawaiitours.com |

    capecoralcomputercenter.com |

    autoinjurywis |

    wearecrafthouse |

    ReplyDelete

Great! You've decided to leave a comment! Please bear in mind that comments are often moderated and that rel="nofollow" is in use and spammy comments will be deleted. Let's have a meaningful conversation instead. Thanks for stopping by!

Advertise on Blogger Buster

Browse through the Archives

All existing posts are still available to view while I'm working on the site, albeit seen in a much simpler interface. Feel free to browse through the archives to find tutorials, templates and articles to help you build a better blog:

Blog Archive

© Blogger Buster 2010 Home | About | Contact | Hire Me | Privacy Policy