Memodifikasi Spoiler Show And Hide

Spoiler Show And Hide
Postingan ini berawal karena ada beberapa sobat Kompi Ajaib yang menanyakan cara memodifikasi spoiler show and hide yang saya pakai. Dan tentunya Anda sudah tahu dan mengenal apa itu spoiler show and hide kan?

Yup...spoiler show and hide adalah sebuah button yang menyembunyikan konten dan menampilkan konten di dalamnya ketika button tersebut diklik. Nah untuk memodifikasinya hanya memerlukan beberapa kode CSS sederhana yang saya yakin Anda bisa melakukannya sehingga model buttonnya akan tampak seperti yang kita inginkan.

Untuk contoh spoiler show and hide yang saya gunakan seperti di bawah ini, silahkan klik tombolnya...



Contoh Spoiler Show And Hide


Bagaimana tertarik untuk mencobanya? Sebenarnya kode spoiler ini seperti kode di bawah ini

<div style="text-align: center;">
<div style="margin: 1px;">
<div class="smallfont" style="margin-bottom: 1px;">
<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 = 'Hide Content'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show Content Click Here'; }" style="font-size: 14px; margin: 0px; padding: 0px; width: auto;" type="button" value="Show Content Click Here" /></div>
<div class="alt1">
<div style="display: none;">
<br />
<div style="text-align: center;">

KONTEN DI SINI

</div>
</div>
</div>
</div>
</div>

Nah untuk memodifikasi tampilan button-nya tambahkan kode CSS di bawah ini

.smallfont{background:#b0130d;border:1px solid #fff;padding:6px 8px 4px;transition:all 400ms ease-in-out;display:inline-block;box-shadow:1px 1px 5px #c3c3c3}
.smallfont input[type=button]{background:none}
input[type=button]{outline:none;display:inline-block;cursor:pointer;font:bold 12px Georgia;text-decoration:none;text-shadow:1px 1px #000;color:#fff;border:none;border-radius:2px;background:#b0130d;transition:all 400ms ease-in-out}
.smallfont:hover,input[type=button]:hover{background:#E02424}
input[type=button]:active,button:active{position:relative;top:1px;left:1px}

Silahkan rubah warna backgroundnya agar sesuai dengan tema blog Anda. Selamat mencoba dan semoga bermanfaat...

You Might Also Like:

How to style text in Disqus comments:
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Hide Parser
Disqus Comments