HOW TO MAKE A SPOILER FOR THE BLOG

Spoiler is a means used to hide a link or a collection of links, a collection of text, images, whole or in part of the blog posts and others by using a combination of html and javascript code. The goal is to save space or space in a post or sidebar. Another advantage of using Spoiler is able to reduce the loading time, the intention is, if we use the spoiler in the picture, then our blog will not be affected by the burden of loading can be burdensome. Spoiler can also be used to hide the video so that loading is not heavy.

For example in the post World's Longest Blog Comments, thereafter the contents of a very long comment I hide a Spoiler, so it can be opened and closed. It is conceivable if the text is displayed as is without spoilers then it will take some space and the entire post will be very long and damage the look of the blog.

How to Make Spoiler:

1. How to make a Spoiler without background color.

<div id="spoiler">
<div>
<input name="button" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'CLOSE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LOOK AGAIN'; }" style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" type="button" value="Spoiler Without a Background Sample" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="text-align: justify;">
Spoiler in the further understanding that it is a way used to hide a link or a collection of links, a collection of text, images, whole or in part of this blog post and others by using the html code. The goal is to save space or space in a post or sidebar. Another advantage of using Spoiler is able to reduce the loading time, the intention is, if we use the spoiler in the picture, then our blog will not be affected by the burden of loading can be burdensome. Spoiler can also be used to hide the video so that loading is not heavy.</div>
</div>
<div id="hide">
</div>



2.SPOILER WITH BORDER AND BACKGROUND COLORS
<div id="spoiler">
<div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show again'; }" name="button" type="button" value="SPOILER WITH BORDER AND BACKGROUND COLORS" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;">
<p style="text-align: justify;">Spoiler in the further understanding that it is a way used to hide a link or a collection of links, a collection of text, images, whole or in part of this blog post and others by using the html code. The goal is to save space or space in a post or sidebar. Another advantage of using Spoiler is able to reduce the loading time, the intention is, if we use the spoiler in the picture, then our blog will not be affected by the burden of loading can be burdensome. Spoiler can also be used to hide the video so that loading is not heavy.</p>
</div><div id="hide"></div></div></div>


Description:

background: # EBF3FB; = This is to change the background color 

border: 1px solid # AACCEE; = This is for size and border color

Posted in: Widget Tips