Membuat Tombol Spoiler, Buka - Tutup | HTML | Di Blog | --- Assalamualaikum, pada postingan ini, RezDown7 akan membagikan tutorial tentang bagaimana cara membuat tombol spoiler di blog. Tombol ini berfungsi untuk menyembunyikan suatu konten/isi yang dapat ditampilkan lagi, biasanya digunakan saat konten yang ingin dimuat kepanjangan, dan pada website forum biasanya spoiler digunakan untuk menyembunyikan gambar dan artikel yang kepanjagan.
Membuat Tombol Spoiler, Buka - Tutup | Show/Hide HTML sbb :
1. Jika anda sudah berada pada halaman untuk membuat spoiler, copy kode berikut :
Ini contohnya :
3. Selesai
Jika ingin spoiler tanpa tombol atau hanya teks aja gunakan kode ini :
[Show]
-Selamat Mencoba-
Membuat Tombol Spoiler, Buka - Tutup | Show/Hide HTML sbb :
1. Jika anda sudah berada pada halaman untuk membuat spoiler, copy kode berikut :
2. Silahkan masukkan konten anda pada tulisan berwarna merah , sedangkan untuk tulisan berwarna biru, silahkan ganti sesuai keinginan.<div id="spoiler">
<div><input style="font-size: 11px; margin: 5px; padding: 0px;" 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 = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan'; }" name="button" type="button" value="rezdown7 spoiler" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">
KONTEN ANDA DISINI...
</div><div id="hide"></div></div></div>
Ini contohnya :
Jika ingin spoiler tanpa tombol atau hanya teks aja gunakan kode ini :
<a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';">[Show]</a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';">[Hide]</a><br /> ---REPLACE KONTEN DISINI GAN--- </span>Ini contohnya :
-Selamat Mencoba-
Langganan:
Posting Komentar
(
Atom
)
Ane ucapkan terimakasih banyak gan atas inoformasi yang telah agan sampaikannya.
BalasHapussama-sama atas kunjungannya.
Hapusartikel yang bermanfaat gan....
BalasHapusbeda sama yang lain nih bener-bener bagus
BalasHapussangat bermanfaat gan :D thanks
BalasHapusHatur nuhun
BalasHapusTerima kasih mas ilmunya..
BalasHapusHatur nuhun kanggo elmuna, Kang :)
BalasHapustks infonya gays, sudah berbagi ilmunya.
BalasHapusArtikel yang betul2 sangat membantu. Terima kasih atas share ilmunya ya gan...
BalasHapusMampir di web ane juga gan http://dhikadwipradya.com
Sankyu min yang terakhir itu yang ane cari" :v
BalasHapusMatur Suwun kang :)
BalasHapusJazakumullahu khairan katsiraa :)
BalasHapusTerima kasih gan atas informasinya. telah lama saya cari spoiler ini. :)
BalasHapusmakasih infonya karena saya memang lagi butuh kode ini
BalasHapusterima kasih gan..
BalasHapusSangat bermanfaat
BalasHapus