Cara Membuat Tombol Spoiler (Show-Hide) - Tutorial -->

Cara Membuat Tombol Spoiler (Show-Hide)


Tombol / Button Spoiler yang berguna untuk menyembunyikan postingan atau widget maupun gambar yang terlalu panjang ke bawah, selain itu juga dapat berfungsi membuat Url menjadi none aktif jika Url suatu Situs diletakan di Area Tombol Spoiler menjadi Tidak _LIve Link_, Juga akan mempersingkat/menghemat area postingan pada Artikel Anda. dan kegunaan lainnya Tombol Spoiler dapat meringankan beban pada saat loading di suatu blog/website. yang cara kerjanya jika Tombol Show di _Klik_ maka secara automatis Blog akan menampilkan semua postingan, widget, maupun Gambar yang diletakan di dalam (Area=sebagai penjelasan) pada Tombol Spoiler, lalu jika Anda _klik_ tombol Hide  maka tampilan postingan, widget maupun Gambar akan menutup kembali. ada beberapa langkah bagaimana Cara Membuat Tombol Spoiler (Show-Hide) pada postingan maupun pada widget sidebar.

Kodenya _Scriptnya adalah sebagai berikut :

<div><div style="margin-bottom: 2px;"><small>_Klik Button / Tombol dibawah ini</small><input value="Show" style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;"> 
"Masukan Gambar,  postingan, Artikel Sobat disini"
</div></div></div>


Hasilnya akan terlihat seperti contoh ini:

     _Klik Button / Tombol dibawah ini

"Masukan Gambar,  postingan, Artikel Sobat disini"

TERIMA KASIH atas kunjungannya di Blog ini




Keterangan pada Kode _Script:
-Kemudian ganti kalimat yang berwarna   Merah  dan Biru  menurut keinginan Anda.
-Untuk kalimat yang berwarna Hijau  Anda dapat menghapus kemudian menggantinya dengan Isi postingan, ataupun Gambar yang di inginkan....Selesai...
Bagaimana..? mudahkan,,, cara membuatnya... "Alhamdulillah"... Selamat mencoba.... Happy blogging...

28 Responses to "Cara Membuat Tombol Spoiler (Show-Hide)"

  1. very nice Button, i am wanna try with my blogm good job

    BalasHapus
  2. wow, keren nih jadinya
    makasi ya

    BalasHapus
    Balasan
    1. sama-sama Gan, thanks telah berkunjung....

      Hapus
  3. Thanks for share..
    Blogwalking ^_^

    BalasHapus
    Balasan
    1. Makasih juga gan telah berkunjung....,, ok gan, ane kunjung balik....

      Hapus
  4. infonya bagus, tapi aku cobakan di power point kok ga nyetel?
    Mohon pencerahan, gan?
    Tq

    BalasHapus
    Balasan
    1. maaf gan, emang ngak bisa work melalui power point karena tombol show/hide ini mengunakan bahasa coding dengan menggunakan script yang biasa digunakan untuk CMS (Content management system), seperti: wordpress, blogger etc, pada jaringan internet dan berjalan/aktif pada saat windows,ubuntu,mac, ketika kita melakukan perintah atau memanggil data dengan menggunakan browser seperti: google crome, mozilla etc, sedangkan power point bahasa program yang digunakan khusus untuk antar OS windows,ubuntu,machintosh etc saja. tidak menggunakan browser.

      Hapus
  5. Balasan
    1. bila pada blogger_ dipostingan diletakan pada html bukan pada Compose, atau html/javascript di sidebar

      Hapus
  6. kalau mau di terapkan di widget blogger narohnya dimana yah mas brow?

    BalasHapus
    Balasan
    1. sudah dijelaskan diatas Gan...coba pencet F3 pada keyboard sekarang kemudian kopas ---->html/javascript<---- tanpa tanda panah... dan (klik) Previous 2x

      Hapus
  7. Makasih infonya bang, bermanfaat sekali..

    BalasHapus
  8. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  9. thanks sob, ini bisa buat widget kan?

    BalasHapus
  10. happy blogging Gan...... n' udah liat diTkp,,, U have a nice blog.... keep on posting...

    BalasHapus
  11. Gan ada cara lain gak kalok kartu sd yang sudah di enkripsi lalu di reset ke pengaturan pabrik agar bisa balik lagi file* nya

    BalasHapus
  12. Gan ada cara lain gak kalo kartu sd yg sudah kita enkripsi lalu di reset ke pengaturan pabrik cara mengembalikan nya kembali

    BalasHapus
  13. Thank you for nice information. Please visit our web:
    Muhamad Kahfi

    BalasHapus

Iklan Tengah Artikel 1

Iklan di tengah artikel

Iklan Bawah Artikel