Blogger posts Quick Edit bookmarklet (updated for 2024)

Here is a simple bookmarklet code for quick-editing a Blogger post.

Background: What is Quick Edit?

A long time ago, Blogger included a nice feature for quickly editing a post when you were viewing it's page, called, of course, Quick Editing. And then with the new Blogger modernized redesign of the main site and the default themes, this quick editing feature seemed to disappear. It used to look like this:

Blogger's Quick Editing feature. Image: Techpreview

There were previously two methods that I had used to regain this functionality, one was by adding a CSS line to ensure the editing button was visible. The other was to add a Chrome extension that would use JS to bring it back. But in 2021, neither of these work for me. 

Update 2024: simplified Quick Edit bookmarklet code

This post previously included a slightly more difficult method which required you manually extracting your BlogID number first. But with the help of Claude-3-Haiku I was able to construct a much simpler version.

All you have to do now is drag this code to your bookmarks bar and it will work!

javascript:window.open("https://www.blogger.com/blog/post/edit/"+document.body.innerHTML.match(/\/feeds\/([A-Z0-9]+)\/posts\/default/i)[1]+"/"+document.body.innerHTML.match(/\/feeds\/([A-Z0-9]+)\/comments\/default/i)[1]);

Bonus! Quick Edit for Blogger pages

A commenter requested a version of this that let's you quickly edit Blogger pages too (not posts, but the static pages). Here's code for that too:

javascript:window.open("https://www.blogger.com/blog/page/edit/"+document.body.innerHTML.match(/\/feeds\/([A-Z0-9]+)\/posts\/default/i)[1]+"/"+document.body.querySelector('a[name]').name);

I'll leave the old method up just in case but I'll strikethrough it to be clear that it's unnecessary now. 

Old Bookmarklet basic code

So instead I just wrote my own simple bookmarklet that, when clicked while viewing a Blogger post page, will take me immediately to the page editor for that post. Here is the code I use:

javascript:window.open("https://www.blogger.com/blog/post/edit/YOURBLOGIDNUMBER/"+document.body.innerHTML.match(/\/feeds\/([A-Z0-9]+)\/comments\/default/i)[1]);

 

Unfortunately you'll notice that I'm not great at writing code for these, so there is one set-up step you'll need to do. I'd like to write one that you can just drag/drop to your bookmarks toolbar that will automatically work for anyone's blog, but I don't know how to correctly embed two variables. 

Add your blogID number first

So instead, you'll need to replace that YOURBLOGIDNUMBER with your own actual Blogger blog ID number. But once you do that, the bookmarklet will automatically load the individual post's ID number into the URL for you and it will work every time after that.

How to find your Blog ID number? 

Easy, just edit one post as a sample and grab it from the URL:

Blog ID and Post ID in the Blogger editor

Don't worry about the PostID. The bookmarklet can grab that by itself. 

Put the bookmarklet code in bookmarks bar

Just drag the code above into your bookmarks bar. 

If that doesn't work, paste that code into an empty bookmark in your browser. It may be easier to just create a random bookmark in the toolbar (like by bookmarking this post right now!), and then edit its URL, replacing the URL with the code. 

For example, here was a bookmark to my Twitter, but you will see that I have edited the URL to be the code. I can also rename the bookmarklet to something like "Blogger post editor" or etc:

Save it and keep it visible in the Chrome (or other browser) bookmarks bar. Now, when viewing a post page from your blog, click the bookmarklet and it should bring you to the post editor for that post. 

Hat Tip to https://stackoverflow.com/a/53437668/8137301