Ao,ao sobat semua salam kenal ya bagi sobat yang baru tau atau buka blog saya,dan salam sejahtera bagi sobat yang sering berkunjung atau baca articles blog saya. nah kali ini saya akan membahas tentang ;
Cara Membuat Berbagai Macam Tombol Spoiler  Atau Tombol Show Hidden, wah cukup panjang juga ya judulnya,hehehehe........!!! Apa itu tombol spoiler???tombol spoiler adalah tombol yang mampu menyembunyikan seseuatu baik itu tulisan,gambar ataupun script. Tombol spoiler juga berguna untuk mempercepat loading blog sobat. jadi gimana???bagi sobat yang lum ngerti dah ngertikan???
nah contonya seperti ini,silahkan di klick LIHAT
 Hehehe,gimana abis ngelihat...takut,ketawa atau nangis ada-ada aja tu saiton. ini adalah contohnya pasti udah ngerti dong,intinya sobat bisa menyembunyikan gambar,tulisan,ataupun script. nah untuk tombol spoiler banyak macamnya lho,oke dah lansung aja.
berikut ini saya akan berikan macam-macam spoiler,dan silahkan sobat klick untuk mengetahui kodenya!!!

Spoiler 1.


Spoiler 2.


Spoiler3.


Spoiler 4.
<div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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 = 'Open'; }" type="button">
</div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>


Spoiler 5.
Judul


<div>
<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Judul</span></i><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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="SPOILER 5" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
LETAKKAN KODE SOBAT DISINI</div>
</div>
</div>
</div>


Nah itu adalah tombol spoiler,lumayan banyak juga ya. kode warna merah dan biru dapat sobat ganti.
Oke sekian dulu selamat mencoba dan semoga bermanfaat.

Poskan Komentar Blogger Disqus

  1. Salam kenal Mas..artikel nya bagus sangat membantu buat saya yang masih newbie
    Idzin simak untuk menerapkan di blog saya yah Sobat,..? salam sukses terus yah Mas?
    O,ya kalau gak keberatan tolong posting juga cara membuat bok scrol atau script yang
    buat nyimpen kode, di postingan yah Sob,..trima kasih sebelum nya. kalau ada waktu
    mampir juga di blog saya. di : Karrysta
    http://karristaent.blogspot.com

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top