BUTTON OR SHOW SPOILER

Penataan Artikel di website atau blog adalah hal yang biasa - biasa saja, atau point yang kesekian untuk hal - hal yang penting dalam dunia blogging. Tergantung seni dari penulis itu sendiri. Karena menurutku menulis itu adalah Seni, dan seni perlu ada kaidah atau nilai tambah buat menambah manisnya gaya tulisan kita, biar terkesan lebih unik dan ngga membosankan pengunjung. Wah.. kaya penulis tenar aja nih. hehehe.. Dengan melihat fenomena setiap Artikel di website, artikel yang panjang sering membuat pengunjung bete alias ogah membaca semuanya dari A sampai Z. Paling bentar hanya paragraf Awal sama paragraf akhir. Bukannya ngga boleh dan melarang artikel yang panjang. Ibarat Anda naik mobil melakukan perjalanan panjang, kalo ngga ada istirahatnya pasti bete

Istirahat yang aku maksudkan dan di sinkronkan dalam sebuah artikel adalah sebagai tampilan sambil lalu, Siaran - siaran di TV aja ada iklannya kok, begitupun dengan menulis. Maksudnya apa ya..? Dalam menulis dapat kita selingi dengan tampilan - tampilan yang atraktif, misal penambahan gambar, efek suara, Efek Marquee, atau blogroll untuk tulisan artikel yang panjangnya 2 km. hehehe.. Di artikel ini, aku ingin membagikan trik menulis dengan efek tombol. Tombolnya bukan untuk suatu link, yang di klik trus terbuka halaman baru. Tombol disini fungsinya untuk memperindah dan menata artikel yang panjang. Apalagi kalo tulisan Anda penuh dengan sensasi yang mengundang rasa penasaran dari pengunjung, dengan menambahkan efek tombol yang ada di bawah ini, di jamin artikelnya lebih menarik dan tertata bagus.

A. KODE TOMBOL YANG PERTAMA

Efek ini ngga di lengkapi dengan kode untuk menutupnya kembali. Aku dapatkan dari sumbernya, memang sudah begini tampilannya. Jika ada yang ingin menambahkan kode HTML nya atau yang hebat utak atik Kode HTML silahkan di edit dan infokan ke aku ya..?

<div style="border: 1px inset #00000; padding: 5px;"><div style="text-align: center;"><button type="button" class="button" onclick="this.parentNode.parentNode.childNodes[1].style.display = ''; this.parentNode.style.display = 'none';" title="Click to show the spoiler."><span style="font-size:100%;color:#000000;"><b>"Kata Kata Tombolnya"</b></span></button></div><div id="spoiler" style="display: none;"><blockquote>
Kata Kata Atau Gambar Yang Mau Disembunyikan, letakkan disini...
</blockquote></div></div>

Stylenya dapat Anda edit sesuai selera Anda, Di posisi mana tombol ini, tampilan border, warna, perintah dalam tombolnya dan lain sebagaiya. Save aja kodenya biar Anda ngga bolak balik lagi ke blog ini. Hehehe.. Atau simpan kodenya di Notepad PC Anda. Contoh Tombolnya seperti di bawah ini.

B. KODE TOMBOL YANG KEDUA

Tombol ini selain di lengkapi dengan kode pembuka tombol dilengkapi juga dengan tombol penutupnya, lebih mantap kayaknya dari yang pertama. Kode HTML nya sebagai berikut...

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Teks atau Gambar letakkan disini
</span></div></div></div></div></div>

Wah.. lebih banyak kodenya ya..?? Dan lebih ribet kayaknya. Silahkan Anda edit sesuai selera Anda, wong kode ini bukan ciptaanku kok.. hehehe. Contoh tombolnya seperti di bawah ini.

Sumber dari kedua kode ini aku sudah lupa.. Benar - benar lupa. Mohon maaf bagi yang menciptakan tombol ini. Swear aku lupa linknya, cos kode ini langsung di save di notepad. Maaf ya.? Namanya juga berbagi. Aku juga ngga mengklaim bahwa kode ini lisensenya aku toh.? Harus diakui bahwa kode ciptaan Anda sangat berguna buat sobat - sobat yang membutuhkannya. HAPPY BLOGGING

Posted in: BLOGGING