How to Add Spoiler Code to a Static HTML Website, Blogger or WordPress

How to Add Spoiler Code to a Static HTML Website, Blogger or WordPress
Page content

Don’t Get Spoilt, Get Code!

It is difficult to step online these days without encountering some information that changes a book, TV show or movie for you. Even reading a general news website (or even the homepage for a reputable print newspaper) can result in you discovering how the final Harry Potter book ends, or what the twist happens to be in the latest Hollywood thriller.

The World Wide Web is renowned for spoilers, which is why it is important to have a means of concealing this information on your website away from innocent eyes that don’t wish to have this information just yet.

There are various ways in which the vital words uttered by Gandalf to Bilbo Baggins can be hidden from plain sight, using either basic CSS or a useful plugin for your blog.

Hiding Spoilers with HTML and CSS

The most obvious means of hiding spoilers is to take advantage of the basic HTML and CSS that is used to position and style the content of your website or blog.

If you have ever selected text in a website or text document, you will know that the selection is given a background, typically blue, to show that you have selected it. By using basic HTML and CSS you can alter the color of the text you wish to obscure, forcing the reader to use their mouse to select the text in order to read the spoiler.

For instance, if your page background is white, change the text color to white using either the following plain HTML:

spoiler here

…or by using CSS such as:

{color: #fff;}

Creating a Spoiler Button in Blogger

If you are using one of the more popular blog or CMS platforms you should be able to find a suitable plugin or script for dealing with spoilers.

For instance, Blogger users can use a script. This will require some JavaScript and CSS to be added to the post itself, and thankfully doesn’t require any complicated template hacks. Begin by logging into Blogger, creating a new post and switching to the Edit Html tab.

Next, paste the following:

Your Title :

Your Text or Image Link

You will notice that there are various CSS elements in this script; if you wish to alter the border or the background-color, these can be easily tweaked, as can the color of the spoiler text.

WordPress Spoiler Plugins

If you would prefer to avoid playing with CSS on your WordPress blog but still wish to include a spoiler function of some sort, there are various plugins that can be installed to assist with this.

One word of warning – do not install plugins without taking a full backup of your site and database. At the very least, backup your theme and database; you can backup your theme via FTP, and your database by logging into your host’s control panel software and accessing their backup tools or exporting the MySQL database to your computer.

Probably the best tool for hiding spoilers in a WordPress blog is Easy Spoiler. You can find this at WordPress.org or by using the plugin search tool within a self-hosted WordPress blog (Plugins > Add New > Search).

Once added, all you need to do is use the shortcode as follows:

[spoiler title="A big spoiler”]This is a spoiler[/spoiler]

This will create a frame for the spoiler and a button for your readers to press to see the big spoiler revealed!

References

How to Make a Spoiler in Blogger, https://compiequ.blogspot.com/2010/02/how-to-make-spoiler-in-blogger.html

Image credit: https://www.kasterborous.com