English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified

Monday, 23 January 2012

How to Make a Spoiler For Blogger


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:
<Div style = "color: # 000000; = This is to change the text colorbackground: # EBF3FB; = This is to change the background color border: 1px solid # AACCEE; = This is for size and border color

1 comments:

Do you have anything against refurbished computers? I have saved a lot from buying refurbished items and the products I get have always been good quality and last longer than some things I have bought new. I have a Dell Optiplex GX520 that I bought refurbished for about $119 once during a holiday deal about two years ago from 'ElectroComputerWarehouse'. It still works great and it serves its purpose. It's great for surfing the net, watching DVDs and other tasks. You may check for you as well www.electrocomputerwarehouse.com

Post a Comment

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites More