Hari ini :


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

22 komentar:

  1. waha... adik bayine lucu tenan...

    ReplyDelete
  2. dri dulu pngen nyoba, tapi lom smpet, cz lupa ma kodenya...makasih ya maz ifoel

    ReplyDelete
  3. kode ini sering saya jumpai tp saya malas untuk mencobanya hehehe... tp gak ada salahnya saya simpan dlu sapa tau pengin nyobain :)

    ReplyDelete
  4. Wuih., mantap.

    Sip di bungkus Mas Ifoel.

    ReplyDelete
  5. Wah hebt mas baru th q nih.....

    Special thanks by Tukang Nggame

    ReplyDelete
  6. aduh, akhirnya ada juga tutorialnya. thanks ya boss

    ReplyDelete
  7. ketika ngelihat foto bayi di atas.. langsung deh tangan kananku ngelik kanan dan save image as..

    hihihih... lucu buanget...

    ReplyDelete
  8. heuhuehue diriku selalu gagal dg script model toogle gt hikz

    ReplyDelete
  9. wah...menarik nih...nanti dipraktekkan deh...makasih ya sdh dishare..

    ReplyDelete
  10. Waduh, bang Ifoell makin kreatif aja bikin tutorial..dari a sampai z. Salam kreatif dan salam silaturrahmi, maaf lama nggak berkunjung maklum lagi tersesat didunia maya..hehehe

    ReplyDelete
  11. hehehe kerennn...
    foto bayinya gemesin dech

    ReplyDelete
  12. mampir pagi sebelum gosok gigi dan mandi
    jangan lupa kunjungannya lagi

    ReplyDelete
  13. Selamat ya... jadi juara 3 di kontes hakimtea

    ReplyDelete
  14. panjang banget ya caranya.. Pusingg

    ReplyDelete

  15. thanks for all the bloggers for the advice may be useful especially for me personally, generally for all of us, I hope we all launched online business

    Amin .....................
    pengobatan gondok beracun alami

    ReplyDelete


  16. nice article thanks to reading your article to my knowledge has increased and hopefully this article can be useful for everyone :)
    Cara mengobati amandel yang bengkak dan sudah parah

    ReplyDelete

Stop SPAM Comments