Install guide · Blogger
Add Halloween effects to Blogger
Blogger lets you edit the theme HTML directly, which is all you need.
Steps
-
Open your blog, go to Theme and use the arrow next to Customize to choose Edit HTML.
-
Find the closing
</body>tag near the end of the file. -
Paste the snippet just above it and click Save.
The snippet
One paste, no other files. It loads halloween.js 1.0.3 from jsDelivr and turns on webs in two corners, blinking eyes, flying witches, a dropping spider and a rising tombstone.
<script src="https://cdn.jsdelivr.net/npm/halloween.js@1.0.3/dist/halloween.iife.js"></script>
<script>
(function () {
function apply() {
document.body.classList.add(
"halloween",
"halloween-screen-left-top",
"halloween-screen-right-bottom",
"halloween-eyes",
"halloween-witches",
"halloween-spider-drop",
"halloween-tombstones"
);
}
if (document.readyState === "loading") {
document.addEventListener("DOMContentLoaded", apply);
} else {
apply();
}
})();
</script>
Check that it works
Open your live site in a private window and reload without cache.
-
Between 18 October and 2 November you should see webs in the screen corners and eyes blinking within a few seconds. Outside those dates the page looks unchanged.
Good to know
- Want to test outside the season? Open the playground, set the active season to cover today and copy the snippet it generates.
- Ambient effects stop when a visitor has reduced motion turned on. The screen-corner webs stay.
- The effects sit in a fixed layer and never shift your page layout.
- Back up your theme first (Theme → Backup) before editing its HTML.
- Nothing showing in season? See troubleshooting.