berbagipediainfo: Cara Membuat Spoiler Link Dengan Tombol

Bismillahirohmanirrohim

Assalamualaikum, wr.wb. Setelah kemarin kita sudah mengetahui dari beberapa kode html yang sudah saya posting terdahulu di kode html terlengkap dan juga sudah saya tambahkan beberapa kode html lagi di artikel saya untuk lanjutan nya yaitu di kode html terlengkap part 2 .

Sekarang saatnya kita mengetahui beberapa tombol spoiler yang bisa kita gunakan untuk menyembunyikan konten kita agar tidak terlihat kalau tidak di klik, konten bisa berupa gambar, link, artikel, video, dll.

Di bawah ini ada beberapa contoh tombol spoiler tersebut yang sengaja saya simpan dalam kotak text area agar kita lebih mudah untuk mengcopy paste nya.

1. Kode Untuk Membuat Link Dengan Tombol

2. Kode Tombol Untuk Spoiler Lihat Gambar

3. Cara Membuat Spoiler Pada Dokumen HTML
Cara Membuat Spoiler Pada Dokumen HTML

Judul Spoiler:

Keterangan : Ganti Judul Spoiler sesuai dengan judul yang Anda kehendaki. Letakan konten yang akan dimasukkan di dalam spoiler seperti sebuah paragraf maupun file gambar tepat pada kata Letakan Konten Di Sini..!!.

4. Spoiler Default

5. Spoiler Style Text
[Tampilkan Konten]

6. Spoiler With Border Color

7. Spoiler With Full Border Color

<b>Simpan Konten Artikel Kalian Disini</b>

</span></span></div>
</div>
</div>

8. Spoiler With Title

SimBale:

9. Spoiler Dengan Gambar

Jangan Di Buka :

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHuFsLyEA95r-ClOANPvMyYbjqV67Trjxr8FUALC5mvHC-7rWRnCj8ymZjtOzep51Yw8X1Vu32pZ-GyYXUMoS1zLoTox0r-R1OLQ8akju2FMviNS8mKVlvJkTu9yJhh26LarzfDvkkw9eE/s640/65442%2523%2521%2540%2523%2521%2523%2540%2521%2523+copy.png" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHuFsLyEA95r-ClOANPvMyYbjqV67Trjxr8FUALC5mvHC-7rWRnCj8ymZjtOzep51Yw8X1Vu32pZ-GyYXUMoS1zLoTox0r-R1OLQ8akju2FMviNS8mKVlvJkTu9yJhh26LarzfDvkkw9eE/s640/65442%2523%2521%2540%2523%2521%2523%2540%2521%2523+copy.png" /></a>
<img border="0" /></div>
</div>
</div>

10. tampilkan konten

11. Tombol Show Buka Tutup

12. Membuat Link Spoiler Tombol

Note : Ganti Warna Merah dengan nama Blog Anda
Keterangan: Pastikan sahabat mengedit link di area HTML bukan di area compose.Mungkin itu saja yang bisa saya berikan di update pada kesempatan kali ini tentang membuat tombol button di area posting

13. Tombol Spoiler Tampilkan

<input value="Tampilkan" style="margin: 0px; padding:0px;width:auto;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 = 'Sembunyikan'; } else{ this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background:#000000;text-align:left;padding:10px;color:#ffffff;">
Masukkan text-nya disini. Gambar juga bisa.
</div>
</div>
</div>
<br />

<p>
<div style="text-align: justify;">
NB :
Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata yang lain yang anda sukai.
Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar</div>
</p>
<br /><br />

<p>
14. Spoiler OPEN / CLOSE</p>
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="font-weight: bold;">Judul Spoiler</span><input value="Open" style=" margin:5px;padding: 0px; width: 80px; 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 = ' Close..'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Clik Here'; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div>
</div>
</div>
<textarea cols="20" rows="3">
<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<span style="font-weight: bold;">Judul Spoiler</span><input value="Open" style=" margin:5px;padding: 0px; width: 80px; 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 = ' Close..'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Clik Here'; }" type="button" />
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
ISI SPOILER
</div>
</div>
</div>
<p>

14. Spoiler OPEN / CLOSE

Judul Spoiler

NB : Huruf warna putih (judul spoiler) bisa di ganti dengan kata yang lain nya. Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai. Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar Semoga Bermanfaat..

15. Spoiler SHOW/HIDE

NB : Huruf berwarna biru bisa anda ganti dengan kata lain kaya: SILAHKAN DI BUKA/SILAHKAN DI TUTUP atau kata kata variasi lain nya yang anda sukai. Huruf yang berwarna merah sobat bisa memasukan pesan atau gambar

16. Spoiler OPEN / CLOSE

Judul Spoiler

17. Cara Membuat Spoiler

18. CARA MEMBUAT SPOILER GAMBAR, IMAGE, atau FOTO

KETERANGAN :Kata "Lihat" dan "Show" bisa diganti dengan "Spoiler" atau kata lainnya yang lebih menarik dan unik.

19. Spoiler Box Show/hide button tanpa edit template

Contoh Spoiler

20. Spoiler model Knob Down Button dipostingan

21. Cara Membuat Spoiler di edit template dengan tambahan CSS

1. Silahkan login ke blog anda -> masuk Template -> Edit HTML -> Cari kode: ]]<*/b:skin*>
2>. Pasang kode dibawah ini dan pasang tepat diatas kode ]]<*/b:skin*> Ini kodenya:

3>. Jika sudah Simpan

22. Membuat Spoiler Pada Postingan

Profil Orang Terganteng Ke dua Versi On The Spot :

Keterangan:
Anda bisa rubah tampilan "TUTUP / BUKA" sesuai selera. Masukan KONTEN Anda seperti gambar, video, teks, dll.

Kekurangan dan kelebihan menggunakan spoiler :
Kelebihan: dapat menghemat ruang penataan Artikel juga fast loading,
kekurangannya: spoiler sering dilewatkan oleh pengunjung jika tidak penting penting amat.

Tips:
Untuk konten yang sangat penting dan mengandung unsur keyword yang dapat terdeteksi Mesin Pencari saya sarankan agar tidak dimasukan dalam Spoiler, untuk apa disembunyikan toh kalau akhirnya ada yang tahu.
Ya Sudah mungkin di kesempatan ini saya cukup kan dulu sampai di sini, terima kasih dan semoga bermanfaat buat kita semua. Amiiin, amiiin, ya robbal allamiiin.

Wassalamualaikum wa rohmatullohi wa barokatu