Sabtu, 28 Disember 2013

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



  ada yang ngasi LIKE  ngak,,,  yaaa...   

       Tweet nya juga boleh.... ngarep (MODE=ON)


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...

26 ulasan:

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

    BalasPadam
  2. wow, keren nih jadinya
    makasi ya

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

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

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

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

    BalasPadam
    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.

      Padam
  5. mantap gan, kunbalnya ditunggu :D

    BalasPadam
  6. Balasan
    1. makasih juga telah berkunjung.......

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

      Padam
  8. kalau mau di terapkan di widget blogger narohnya dimana yah mas brow?

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

      Padam
  9. Makasih infonya bang, bermanfaat sekali..

    BalasPadam
  10. Ulasan ini telah dialihkan keluar oleh pentadbir blog.

    BalasPadam
  11. thanks sob, ini bisa buat widget kan?

    BalasPadam
  12. Balasan
    1. happy blogging Gan...... n' udah liat diTkp,,, U have a nice blog.... keep on posting...

      Padam