Senin, 10 Juni 2013

Embed spoiler to your blog posts or page

Spoiler for bloggers is not something new.
In my own simplified meaning, spoiler is a clickable button used to open certain hidden contents (text, video, image or else) on a blog's page or post.
The purpose to hide the contents itself is to minimize the the space of each post or page to look more tidy and order.
The spoiler codes are flexible and can be used on a static page, post page or widget area.
Keep in mind when you are going to embed spoiler codes  use HTML mode.


Below are simple codes how to make spoiler on your blog.

<div style="margin: 10px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler title example</b>: <input 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 = 'Click here to close or open'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Click here to open or close'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 175px;" type="button" value="Click here to open or close" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Spoiler for bloggers is not something new ... </div> </div></div>

Note: Replace the text in blue color with your own customized or desired text

See below example of spoiler implementation on this post.

Spoiler title example:
Spoiler for bloggers is not something new. In my own simplified meaning, spoiler is a clickable button used to open certain hidden contents (text, video, image or else) on a blog's page or post. The purpose to hide the contents itself is to minimize the the space of each post or page to look more tidy and order. The spoiler codes are flexible and can be used on a static page, post page or widget area. Keep in mind when you are going to embed spolier use HTML mode).

0 komentar:

Posting Komentar