How To Create And Install a Spoiler On Blogger/Blogspot

How to create and install a spoiler on Blogger / Blogspot? Spoiler is used to condense the place or hide the content (text, photos or videos) to open the lid. Spoiler made ​​using javascript button. While used to hide the CSS display property, in this case, "display: none;". There are a lot of its functions, such as to shorten the text or images are very large / long and eating space for the page or hide surprises for visitors.
In the blog post, the spoiler can be used to shorten the length of the page before it is clicked by visitors, so it does not seem complicated.

Spoiler:

How to create and install a spoiler on Blogger / Blogspot:
1. Login to Blogger Dashboard
2. Choose a New Post as usual made ​​a post
3. Choose the Edit HTML mode when creating a post
4. Use the following script code to make a spoiler:

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Open" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Put the text or script code (image or video) here
<br>
</div>
</div>
</div>

5. We can change the title of spoiler at will, as well as Open and Close.
6. Click the Publish or Publish Post when done.

Posted in: Blogger Design,Blogger Layouts,Blogger Tips,Blogger Tutorials