How to Install Spoilers on a Blogger Blog

How to Install Spoilers on a Blog

How to Install Spoilers on a Blog - What are Spoilers? And how do you install the spoiler button on the blog? For those of you who like to move on Internet forums like Kaskus, you must be familiar with spoilers. This feature serves to hide certain parts of the writing (can also contain images), which will only 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 lots of images with large size (the slang term BWK / bandwidth killer), but don't want the image to appear first, to save bandwidth. So a 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 the spoiler alert writing.

The example of the spoiler button is as below:

ISI SPOILER YANG HENDAK DISEMBUNYIKAN

<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">
ISI SPOILER YANG HENDAK DISEMBUNYIKAN
</div>

The code above can be used both for posting to Blogger / Blogspot and WordPress. Keep in mind that the code needs to be entered in the HTML (Blogger) or Text (WordPress) area of ​​the posting 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 different IDs. Replace the spoiler in the code above with a unique ID, for example, spoiler01, spoiler02, etc ...
• Spoilers are the text that appears on a button. You can replace it with other writing as you wish.

• You can replace the button with the image you want. How to replace all the code 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'}"/>

where IMAGE_URL is the direct link to your image location.