One snippet, pasted into Theme → Edit HTML, before </head> — because one paste in the head gives every page its own score — the badge auto-detects which page it's on. Blogger still hosts millions of blogs on blogspot and custom domains, and almost none of those sites want another gadget just to render a small piece of live data. Nothing to install. Blogger's own HTML/JavaScript gadget takes raw markup, which is all this needs — and unlike a theme edit, a gadget survives changing your theme.
Built our site to 99 on PageSpeed Insights? Show it off. This badge auto-pulls your live Lighthouse score and shows '99 / 100' as a tiny embedded pill on any page.
Blogger themes are parsed as XML, so characters like &, <, > and quotes inside a script can trigger errors such as "The reference to entity must end with the ';' delimiter" and refuse to save. Our snippet is a plain async script tag with no bare ampersands, so it pastes cleanly — but if you ever hit that error, wrap the code in //<![CDATA[ ... //]]> or encode the five reserved characters. This is the main reason to prefer a gadget over a theme edit.
The post editor has two modes. Compose escapes anything that looks like markup, so the snippet renders as visible text instead of a widget. Switch to HTML view before pasting, and avoid flipping back to Compose afterwards — Blogger sometimes rewrites the markup when it converts between the two.
Changing theme, restoring a backup or applying one of Blogger's own themes replaces the whole template, taking any code you pasted into it with it. Gadgets live in your layout settings instead, so they survive. Unless you specifically need the <head> position, use a gadget.
Nothing to install. Blogger's own HTML/JavaScript gadget takes raw markup, which is all this needs — and unlike a theme edit, a gadget survives changing your theme. Installing a gadget for this would mean an extra dependency, an update cycle and a security surface to render one snippet. Paste it into Theme → Edit HTML, before </head> and you're done.
Theme → Edit HTML, before </head> — because one paste in the head gives every page its own score — the badge auto-detects which page it's on. In the Blogger dashboard open Theme, click the arrow beside Customise, and choose Edit HTML. Press Ctrl/Cmd+F inside the editor and find </head>. Paste the snippet on the line directly above it, then click Save. Back up first: the editor has no undo once you've saved.
No. The script tag is async, so it never blocks your page from rendering, and the widget draws itself after your content is already on screen. Blogger is served by Google's own infrastructure and the snippet is one async tag, so it loads after your post is already on screen. There's no cache to purge — saving a gadget publishes it immediately.
Layout editor: Add a Gadget → HTML/JavaScript. Theme editor: Edit HTML, paste above </head> or </body>. Post editor: switch to HTML view, then paste. Blogger mobile app: not supported — use the desktop dashboard. Any builder with a raw-HTML or code block will render it, because there's nothing framework-specific in the snippet.