9 Cara Membuat Tombol Spoiler Buka Tutup Keren Di Blog

Cara membuat spoiler buka tutup atau tombol tampilkan sembunyikan keren pada postingan blog - Tombol spoiler atau tombol buka tutup ini biasanya digunakan untuk memperindah tampilan blog, biasa orang gunakan untuk mempersingkat postingan atau artikel supaya tidak berantakan, misalnya untuk menampilkan banyak foto atau kode script, tombol ini juga bisa dipasang pada widget sobat.
Lalu bagaimana Cara Membuat Tombol Spoiler Buka Tutup Keren Pada Postingan ?
Sebelum kita masuk pada konten pembahasan kita lihat dulu contohnya seperti dibawah ini :




Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Kedua :


[Show]


Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Tiga :


Pevita Pearce

Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Empat :


Pevita Pearce


Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Lima :


Pevita Pearce


Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Enam :

Pevita Pearce


Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Tujuh :

SimBale:
Pevita Pearce



Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Delapan :


Judul Spoiler:
Pevita Pearce


Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Sembilan :

Pevita Pearce



Bagaimana Sob, keren kan yang keren contoh spoilernya atau gambar yang ada di spoiler. hehee
Mari kita lanjut ke cara membuat tombol spoiler buka tutup keren ini, berikut kita simak cara membuat tombol spoiler, bebas sobat mau pilih contoh yang pertama atau contoh yang kedua, fungsinya sama - sama untuk mempersingkat tampilan, dan pastinya memperindah tampilan blog kita.

Lanjut ke Cara Membuat Tombol Spoiler Buka Tutup Keren Pada Postingan :
  • Langkah pertama sobat masuk dulu pada blogger
  • Lalu pilih entri baru
  • Masukkan kode script berikut pada HTML bukan Compose ya.
  • Setelah memasukkan kode di HTML kemudian klik Compose
  • Tulis artikel sobat dan siap Publikasikan
Berikut ini kode script Tombol Spoiler Buka Tutup Keren Pada Postingan :

Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Pertama
  •  Lihat Dan Ambil Kode script contoh pertama
    
    <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%;">
    
    LETAKKAN KONTEN SOBAT DISINI...
    
    </div><div id="hide"></div></div></div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Kedua
  •  Lihat Dan Ambil Kode script contoh kedua
    
    <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 /> 
    
    LETAKAN KODE KONTEN SOBAT DISINI 
    
    </span>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Tiga
  •  Lihat Dan Ambil Kode script contoh Tiga
    
    <div style="text-align: left;">
    <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="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color: #e6e6e6; border-radius: 2px; border: 2px solid #ccc; color: black; width: 100px;" type="button" value="Buka" /></div>
    <div style="padding: 5px; text-align: justify;">
    <div style="display: none;"> 
    
    KODE KONTEN DISINI OK 
    
    </div>
    </div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Empat
  •  Lihat Dan Ambil Kode script contoh Empat
    
    <div style="margin-bottom: 2px;"><div style="margin-top: 5px; text-align: left;"><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-top: 5px; width: 60px;" type="button" value="Buka" /> </div><div style="background-color: no; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;"><div style="display: none;">
    <span style="color: white; font-style: regular;"><span style="color: white; font-family: Verdana, sans-serif;">
    
    KODE KONTEN DISINI OK
    
    </span></span></div></div></div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Lima
  •  Lihat Dan Ambil Kode script contoh Lima
    
    <div style="margin-bottom: 2px;"><div style="margin-top: 5px; text-align: left;"><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-top: 5px; width: 60px;" type="button" value="Buka" /> </div><div style="background-color: white; border-bottom: 2px solid #1E90FF; border-left: 20px solid #008000; border-right: 2px solid #1E90FF; border-top: 2px solid #1E90FF; margin: 0px; padding: 6px;"><div style="display: none;"><span style="color: white; font-style: regular;"><span style="color: black; font-family: Verdana, sans-serif;">
    
    KODE KONTEN DISINI OK
    
    </span></span></div></div></div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Enam
  •  Lihat Dan Ambil Kode script contoh Enam
    
    <div style="margin: 5px 10px 10px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <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: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
    <div class="alt2" style="border: 2px inset; margin: 0px; padding: 6px; text-align: left;">
    <div style="display: none;"> 
    
    KODE KONTEN DISINI OK
    
    </div>
    </div>
    </div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Tujuh
  •  Lihat Dan Ambil Kode script contoh Tujuh
    
    <div style="margin: 5px 20px 20px;">
    <div class="smallfont" style="margin-bottom: 2px;">
    <b>SimBale</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;"> 
    
    KODE KONTEN DISINI OK 
    
    </div>
    </div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Delapan
  •  Lihat Dan Ambil Kode script contoh Delapan
    
    <div>
    <div style="margin-bottom: 5px;">
    <span style="font-size: large; font-weight:bold;">Judul Spoiler:</span>
    <input value="Buka" type="button" 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'; }"></div>
    <div style="margin: 0px; padding: 10px; border: 1px inset;">
    <div style="display: none;"> 
    
    KODE KONTEN DISINI OK
    
    </div>
    </div>
    </div>
    
Kode Script Contoh Membuat Tombol Spoiler Buka Tutup - show hide ke Sembilan
  •  Lihat Dan Ambil Kode script contoh Sembilan
    
    <div style="margin-bottom:
    2px;">
    <div style="margin-top: 5px;
    text-align: center;">
    <input value="Buka" style="margin-top: 5px; width: 100px; font-size: 12px;" 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'; }" type="button"> </div>
    <div style="border: 1px inset
    ; margin: 0px; padding: 6px;"><div style="display:
    none;">
    
    KODE KONTEN DISINI OK
    
    </div></div></div>
    

Saya rasa cukup sampai disini, tutorial cara membuat tombol spoiler buka tutup , membuat tombol show hide pada postingan blog, sebelum kita tutup mungkin ada saran sedikit, jika sobat setelah mencobanya nanti ternyata ada maslah atau kendala, mungkin sobat bisa langsung ke komentar dibawah, kita bahas bareng - bareng pemecahan masalahnya seperti apa.

Sebelumnya terima kasih, atas kunjungan sobat semua tentang tata Cara Membuat Tombol Spoiler Buka Tutup Keren Pada Postingan / artikel blog blog, semoga bermanfaat.

Salam hangat My Kuper