Cara membuat spoiler show/hide gambar dengan latar background

spoiler

Spoiler show hide biasa digunakan seorang blogger untuk meringkas tampilan halaman blognya dengan cara menyembunyikan teks atau gambar pada suatu artikel yang mereka buat dan disamping akan terlihat lebih keren tentunya akan membuat pengunjung lebih tertarik untuk mengunjungi blog sobat.

Setelah searching di mbah google akhirnya saya temukan bagaimana cara membuat spoiler show hide yang baru yang tentunya berbeda dong dari yang sebelumnya. Kenapa saya katakan berbeda, karena pada spoiler show hide ini memiliki latar background warna dan mungkin juga bisa dengan latar background gambar akan tetapi ane belum coba otak atik scriptnya nih jadi tunggu aja postingan selanjutnya ya .

Sobat udah tahukan maksud saya di atas? kalo sobat belum tahu sebaiknya langsung sobat praktekin aja deh biar lebih mudah oke.

Silahkan sobat copy script di bawah ini.

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show'; }" name="button" type="button" value="Spoiler Dengan background Warna dan Border" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><p style="text-align: justify;">Apa Aja Boleh<br /> </p></div><div id="hide"></div></div></div>

Catatan:

  • Tulisan yang berwarna biru dapat sobat ganti dengan warna kesukaan sobat. Tinggal sobat ganti dengan code warna html kesukaan sobat. Untuk mengetahui code warna html klik di sini.
  • Tulisan yang berwarna merah dapat sobat ganti dengan tulisan yang sobat inginkan.
  • Tulisan yang berwarna ungu dapat sobat ganti denga angka yang sesuai dengan ketebalan border yang sobat inginkan.

maka tampilannya akan nampak seperti di bawah ini.

6 komentar:

  1. Good, your blog full of information and i will visit again thanks, :)

    BalasHapus
  2. thanks gan...,. :bye:

    BalasHapus
  3. @Juned Albughisy mantap gan ini yang ta cari2 slam knal :)

    BalasHapus
  4. @Anonim Terimakasih atas kunjungannya sob... :p

    BalasHapus
Catatan:
Untuk menyisipkan video, gunakan tag <i rel="youtube">URL YOUTUBE ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Untuk menyisipkan kode panjang, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menyisipkan catatan, gunakan tag <b rel="quote">CATATAN ANDA...</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>

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!"

Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (out of topic) dengan menekan tombol OOT di bawah ini.

Konversi Kode di Sini!OOT

 
Design by Juned al~Bughisy Copyright © 2012 ~ 2013 Powered by Blogger
Back to Top