Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Spoiler Versi Keren

Cara Membuar Spoiler Versi Keren
Oke sob, kemaren udah janji kan mau bikin postingan tentang Cara Membuat Spoiler versi keren-nya di artikel sebelumnya: Cara Membuat Spoiler Sederhana :) Nah sekarang kita langsung ke TKP aja. Ini dia langkah-langkah mudah-nya:

Langkah-langkah Membuat Spoiler Keren

  • Pertama login ke blogger
  • Masuk ke Edit HTML
  • Cari kode ]]></b:skin>
  • Copy Paste kode berikut tepat diatas kode ]]></b:skin>
.spoiler{background:#f9f9f9 url(https://lh3.googleusercontent.com/-CoP7gpji2kI/UAlWXkvzDfI/AAAAAAAABA0/i49o5VKz3F0/h120/gradient2.php.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:arial;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left}
  • Klik Simpan Template
  • Kemudian Jika ingin membuat spoiler di widget, maka buka Tata Letak/Layout Blogger,
  • Klik Tambah Gadget, klik Tambah HTML/Javascript
  • Kemudian Copy Paste kode berikut:
<div class="spoiler"> <div class="spoirel">Judul Widget Anda<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 = 'TUTUP'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="background: #f9f9f9; border: 0px solid #000; color: #8B4513; font-family: arial; font-size: 10px; margin: 0px;font-weight:bold;text-transform:uppercase;float:right;" type="button" value="LIHAT" /></div> <div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; text-align:center;padding: 0px;"> <div style="display: none;"> <br />Masukan Kode Widget Anda</div> </div> </div>

  • Ganti Teks  yang berwarna diatas sesuai yang anda inginkan.
  • Jika ingin membuat spoiler lagi, tinggal copy paste kode diatas, tidak perlu edit html lagi :)
Selamat Mencoba, dan Semoga bermanfaat :)

Merasa Artikel Ini Bermanfaat? Silahkan Share atau Bagikan Artikel ini dengan Klik Tombol-tombol Di Bawah Agar Bisa Bermanfaat Juga Untuk Orang Lain :) Terimakasih!