CARA MEMBUAT TOMBOL BUKA TUTUP DI BLOG | TOMBOL SPOILER

Cara Membuat Tombol Buka Tutup (Sopiler) di Blog - Apa itu spoiler? Saya yakin teman-teman blogger sudah pada tahu semua mengenai arti dari spoiler ini yaitu sebuah script yang berfungsi sebagai tombol buka tutup (open close button). Spoiler telah banyak digunakan didalam web blog site karena fungsinya yang sangat membantu tampilan sebuaH web blog site itu sendiri. Salah satu kesamaan dengan spoiler ini adalah scroll bar dan tab view yang juga memiliki fungsi yang sama diantara ketiganya.

Lalu bagaimana cara membuat spoiler di blog? Untuk membuat spoiler di blog, anda cukup memasang kode spoiler berikut diamanapun yang ingin anda buat tampilannya menjadi hemat ruang dan minimalis sehingga tidak memakan ruang yang ada di blog anda.

Sebelumnya, ada 2 tampilan yang bisa anda buat dalam membuat spoiler ini yaitu spoiler dengan adanya garis dibagian bawah yang menunjukkan kalau didalam tombo, spoiler tersebut ada isinya dan tanpa garis seperti contoh pada Demo berikut ini :

Spoiler Tanpa Tampilan Gambar

Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini :

<div align="left" style="margin: 5px 10px 10px;">

<div class="smallfont" style="margin-bottom: 2px;">

<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>

<div class="alt2">

<div style="display: none;">

<div style="border: medium none; padding: 10px; text-align: left;">

Ganti dengan objek atau teks yang anda inginkan

</div>

</div>

</div>

Spoiler Dengan Tampilan Gambar Tapi Masih Belum Terlihat

Untuk membuat tombol buka tutup (spoiler) seperti diatas, silahkan salin kode berikut ini :

<div style="margin: 5px 10px 10px;">

<div class="smallfont" style="margin-bottom: 2px;">

<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="color: red; margin: 0px; padding: 5px; text-align: left; width: 100%;" type="button" value="Buka" /></div>

<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">

Ganti dengan objek atau teks yang anda inginkan

</div>
</div>

</div>

Keterangan:
warna kuning : Silahkan ganti dengan objek atau teks yang anda inginkanTerimakasih. Demikian cara membuat tombol spoiler di blog

CARA MEMBUAT TOMBOL BUKA TUTUP DI BLOG | TOMBOL SPOILER 9 Out Of 10 Based On 10 Ratings. 9 User Reviews.

Share 'CARA MEMBUAT TOMBOL BUKA TUTUP DI BLOG | TOMBOL SPOILER' On ...

Ditulis Oleh : Unknown

Sobat sedang membaca artikel tentang CARA MEMBUAT TOMBOL BUKA TUTUP DI BLOG | TOMBOL SPOILER. Oleh Mas Alim, Sobat diperbolehkan mengcopy paste atau menyebar-luaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya, hak cipta dilindungi! <a href="http://masalim93.blogspot.com/2013/06/cara-membuat-tombol-buka-tutup-di-blog.html" target="_blank">CARA MEMBUAT TOMBOL BUKA TUTUP DI BLOG | TOMBOL SPOILER</a>

::www.facebook.com/al.alim18::

Ditulis oleh: Unknown - Jumat, 14 Juni 2013