How to Make a Spoiler or button Show / Hide In article Blogs

How to Make a Spoiler or button Show / Hide In article Blogs - Create a spoiler sometimes indispensable to page views your blog or personal website. By using this spoiler the space on your blog page will look more compact and more savory in view.

For the application of the blog is very easy, the way he is

Login to your blogger
then create a new entry in advance.
Click Edit HTML
Copy Paste code below to your liking

<div><div style="margin: 20px; margin-top:5px">
<div style="margin-bottom: 2px;" class="smallfont">
<input style="margin: 0px; padding: 5px; width: auto; " value="Show" 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 = 'Hidden'; }else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }"type="button"/>
</div>
<div class="alt2"><div style="display: none;">
<div style="border: none; color:none; background-color:none; text-align: justify; padding:10px;">
<span style="color: rgb(255, 0, 0);" data-mce-style="color: #ff0000;">
<strong>PUT YOUR CONTENT HERE</strong></span>
</div>
</div>
</div>
</div>
</div>

You can also use a version of the code to another, as the following?

<div>
<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;font-size:10px;" onclick="if(this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display != &#39;&#39;) { this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;&#39;; this.innerText = &#39;&#39;; this.value = &#39;Sembunyikan&#39;; } else{ this.parentNode.parentNode.getElementsByTagName(&#39;div&#39;)[1].getElementsByTagName(&#39;div&#39;)[0].style.display = &#39;none&#39;; this.innerText = &#39;&#39;; this.value = &#39;Tampilkan&#39;; }" type="button" />
</div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Enter the text it here Alternatively Images can also be.
</div>
</div>
</div>

How to Make a Spoiler or button Show / Hide In article Blogs 2015-10-04T09:57:00-07:00 Rating: 4.5 Diposkan Oleh: Kang Icung