Bookmarklet to bring back quick edit for Blogger posts (updated for 2024)

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



Background: 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: New simplified 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!

Newer simplified bookmarklet code

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]);

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

Comments

Techbox said…
이 글을 보고 바로 해결했습니다.
그동안 수정이 매우 힘들었었는데 좋은 팁을 주셔서 감사합니다 Thanks you very much
Java 스크립트에 블로그ID를 넣었고, 그 코드를 복사하여
즐겨찾기에 등록을 한 후 해당 Blogger게시물에서 이 즐겨찾기를 누르니 편집으로 바로 이동하였습니다.
저는 10원팁 블로그를 저의 Favorite 에 등록해놓았고, 자주 들리겠습니다.
제 블로그에도 놀러와주세요 ^^ 재미있는 자료는 없습니다만..
http://techgoogleblogger.blogspot.com
Sam Nordberg said…
제 블로그포스팅 도움이 되었다니 다행입니다!
Michael Leddy said…
A great improvement, esp. for those of us constantly tinkering with posts. Thanks!
Abu Raniya said…
//Once you replace your Blog ID in the bookmarklet code, just paste that code into an empty bookmark in your browser and then, when viewing a post page from your blog, click the bookmarklet and it should bring you to the post editor for that post.//

What is meant by empty bookmark? I opened a new tab and bookmarked it. Is this empty bookmark?

Can you please elaborate the steps needed to quick edit the post?
Sam Nordberg said…
I mean that the code needs to be saved inside a bookmark. For example, bookmark any page, and put the bookmark in the Chrome bookmarks toolbar. Then edit the bookmark, and replace the URL with the code (the code that starts with "javascript:"). Then when you view a blog post you want to edit, click that bookmark.

I will edit my post to try to be more clear. Please have another look. I hope that helps.
Paperesse said…
Bravo!!! Thank you very much; this works great. Perhaps just a bit more clarification for someone who might need it, if like me they were a tad confused at first. In Chrome bookmark a blog post, name it Quick Edit, then go to Bookmark and Lists, then Bookmark Manager and edit the bookmark by inserting this wonderful bookmarklet, then change the blog id number to your own, and save. Voila!

Sam Nordberg said…
Just updated the posts for 2024. Made it way easier to use. Now the code can be used as-is. No more fumbling around to find your own BlogID first.