Quick-edit “Pencil” link for Blogspot.

README.md

About this

This is a little hack to fix the issue reported by a lot of Blogspot bloggers here:

https://support.google.com/blogger/thread/94150705/blogger-quick-edit-pencil-icon-has-disappeared https://support.google.com/blogger/thread/94163591/edit-tool-on-blog

NOTE: A little downside is that the “Pencil” word under the posts is visible to everyone (not only the blog authors).

How to use

You can add this as an “HTML/JavaScript” gadget in the Layout editor of Blogspot admin UI:

quick-edit.js

<script>
var blogId = document.querySelector('link[rel="service.post"]').href.match(/\d+/)[0];

console.log('blogId', blogId);

setTimeout(function() {
  document.querySelectorAll('.post-footer').forEach(function(footer) {
    var postId = footer.parentElement.querySelector('a').name;

    console.log('postId', postId);

    var href = 'https://www.blogger.com/post-edit.g?blogID=' + blogId + '&postID=' + postId +  '&from=pencil';

    var a = document.createElement('a');
    a.href = href;
    a.textContent = 'Pencil';

    footer.appendChild(a);

    console.log('Added pencil', a);
  });
}, 1000);
</script>