Pin Me

How to Hide Spoilers in Your Blog

written by: •edited by: Michele McDonough•updated: 5/31/2011

If you're concerned about giving away the plot of a new movie, book or TV episode, spoiler code can be really useful to prevent your blog's readers from getting upset. This can be added manually or with a plugin.

  • slide 1 of 5

    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.

  • slide 2 of 5

    Hiding Spoilers with HTML and CSS

    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:

    <font color="white">spoiler here</font>

    …or by using CSS such as:

    {color: #fff;}

  • slide 3 of 5

    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:

    <div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">Your Title : <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" ezonclick="true" value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" type="button"> </div>

    <div class="alt2" style="margin: 0px; padding: 6px; border: 1px inset; background-color: rgb(245, 245, 245); background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0% 50%; -moz-background-size: auto auto; -moz-background-clip: -moz-initial; -moz-background-origin: -moz-initial; -moz-background-inline-policy: -moz-initial; color: rgb(127, 69, 0); line-height: 1.5em;"><div style="display: none;">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.

  • slide 4 of 5

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

  • slide 5 of 5


    How to Make a Spoiler in Blogger,

    Image credit: