Membuat Tombol Spoiler, Buka - Tutup | Show/Hide HTML
Rabu, 28 Mei 2014
-
11:50 AM
|
17
Comments |
Rezkiji
|
Edit Entri
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][Hide]
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-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 :
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-RezDown7
-Selamat Mencoba-
Langganan:
Posting Komentar
(
Atom
)
Entri Populer
- Membuat Beberapa Gambar Berefek Hover Sederhana
- Membuat Tombol Next Page Dengan Angka
- Cakram Blu-Ray
- Daftar Kode Warna | HTML
- Daftar Agen Tiket Pesawat Termurah - Velosita
- Download Mp3 Al Qur'an Merdu Oleh Idris Al Hashemi
- Download Windows7 Starter Untuk Netbook | 32 Bit
- Download PES 2017 Untuk Mobile Android - 100% Work
- Jadwal Pertandingan Timnas Indonesia Senior, U-23 Dan U-19 | Update Terbaru
- Cara Menampilkan Gambar Di File Explorer Windows 10 - Thumbnail
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