For those of you who like to move on Internet forums such as Kaskus, you are definitely familiar with spoilers. This feature serves to hide certain parts of the writing (it can also contain images), new ones will appear after the spoiler button is clicked.


How to Install Spoiler in Blog?

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 large size images (the term slang is 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 movie or book review, but don't want to open the storyline for those who haven't watched the film or read the book, then we can hide the writing that contains this plot and name the button with a spoiler alert.

The example of the spoiler button is as below:



How to Install Spoiler in Blog?

The 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">
SPOILER CONTENTS ARE HIDDEN HEREIN
</div>

The code above 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.


Setup:

  • If you want to install more than one spoiler button on the same page, you need to name it with a different ID. Replace spoiler writing in the code above with a unique ID, for example spoiler01, spoiler02, etc ...
  • A spoiler is the text that appears on the button. You can replace it with other writing at will.
  • You can change the button with the image you want. This method is to change all the codes located above <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'}"/>

I hope this trick is useful for you, then don't forget to share. Also comment below in case of any problems. I'll see Y'all around.