How to Install a Spoiler on a Blog

How to Install a Spoiler on a Blog - What is a spoiler? And how do I install the spoiler button on the blog? For those of you who like to do activities on Internet forums like Kaskus must be familiar with spoilers. This feature serves to hide certain parts of the writing (it can also contain images), the new one will appear after the spoiler button is clicked.

There are three examples of situations that are suitable for applying this spoiler technique.

1. for sites or blogs that contain lots of questions and answers (Q & A), such as academic sites (lessons) or puzzles, where new answers will open after the spoiler button is clicked.

2. if we want to post a lot of images with large size (the slang term BWK / bandwidth killer), but do not want the image to appear first, to save bandwidth. So the new image will open if the reader really wants to see it and click the spoiler button.

3. If we want to write a film or book review, but do not want to open a storyline for those who have not watched a movie or read the book, then we can hide the writing containing this plot and name the button with the words spoiler alert.

The example of the spoiler button is as below:

Spoiler

Markup code needed:

<button title="Click to show/hide content" type="button" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}">Spoiler</button>
<br/>
<div id="spoiler" style="display:none">
CONTENTS OF SPOILERS THAT WILL HAVE HIDDEN
</div>

The above code can be used both for posts on Blogger / Blogspot and on WordPress. Keep in mind that the code needs to be entered in the HTML (Blogger) or Text (WordPress) area in the post column, not in the Compose (Blogger) or Visual (WordPress) area.

Settings:

• If you want to install more than one spoiler button on the same page, you need to name it with a different ID. Replace the spoiler posts in the code above with a unique ID, for example spoiler01, spoiler02, etc ...
• Spoiler is the text that appears on the button. You can replace it with other writing at will.
• You can replace the button with the picture you want. The way to replace all the code above is <br/> with:

<img src="IMAGE_URL" title="Click to show/hide content" onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}"/>

where IMAGE_URL is a direct link to the location of your image.

So How to Install Spoilers on Blog Blogger and WordPress. May be useful.