Cara Membuat Tombol Spoiler (Show-Hide)
Sabtu, 28 Desember 2013
28 Comments
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
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...
nice info..thanks......
BalasHapusthanks juga udah mampir...
Hapusvery nice Button, i am wanna try with my blogm good job
BalasHapusthank's for your comming....
Hapuswow, keren nih jadinya
BalasHapusmakasi ya
sama-sama Gan, thanks telah berkunjung....
HapusThanks for share..
BalasHapusBlogwalking ^_^
Makasih juga gan telah berkunjung....,, ok gan, ane kunjung balik....
Hapusinfonya bagus, tapi aku cobakan di power point kok ga nyetel?
BalasHapusMohon pencerahan, gan?
Tq
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.
Hapusmantap gan, kunbalnya ditunggu :D
BalasHapusthank's gan..... i'm coming......
HapusThanks infonya gan
BalasHapusmakasih juga telah berkunjung.......
Hapustaruhnya di mana ?
BalasHapusbila pada blogger_ dipostingan diletakan pada html bukan pada Compose, atau html/javascript di sidebar
Hapuskalau mau di terapkan di widget blogger narohnya dimana yah mas brow?
BalasHapussudah dijelaskan diatas Gan...coba pencet F3 pada keyboard sekarang kemudian kopas ---->html/javascript<---- tanpa tanda panah... dan (klik) Previous 2x
HapusMakasih infonya bang, bermanfaat sekali..
BalasHapusTy
HapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusyour comment is _LIve Link_
Hapusthanks sob, ini bisa buat widget kan?
BalasHapusbisa gan.... silahken diaturi..
Hapushappy blogging Gan...... n' udah liat diTkp,,, U have a nice blog.... keep on posting...
BalasHapusGan ada cara lain gak kalok kartu sd yang sudah di enkripsi lalu di reset ke pengaturan pabrik agar bisa balik lagi file* nya
BalasHapusGan ada cara lain gak kalo kartu sd yg sudah kita enkripsi lalu di reset ke pengaturan pabrik cara mengembalikan nya kembali
BalasHapusThank you for nice information. Please visit our web:
BalasHapusMuhamad Kahfi