Warung Bebas

Sabtu, 31 Maret 2012

Cara Membuat Spoiler Di Blog





Tombol Spoiler memang sedang populer saat ini, tombol ini banyak ditemukan di KasKus .Tombol ini biasanya digunakan untuk menyembunyikan sesuatu yang menarik agar terlihat lebih mengejutkan saat dibuka dan juga bisa digunakan untuk menyingkat panjang page agar lebih familiar saat dibaca.
Klik show untuk membuka gan
Contoh Spoiler

Tentunya kalian juga sudah banyak yang tau tentang hal ini dan kalian juga sudah banyak yang lihat karena sekarang Spoiler juga banyak digunakan oleh para blogger pada setiap postingan.
Untuk itu langsung saja tutorialnya :



  • Saat anda membuat postingan, pilihlah edit HTML
 
  •  Kemudian copy kan code berikut dan tempatkan di tempat yang anda inginkan

<div>
<div style="margin: 4px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i><span style="font-weight: bold;">Klik show untuk membuka gan</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="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Isi spoiler,bisa berupa gambar,teks atau video.
</div>
</div>
</div>
</div>


  • Tulisan Merah dan Biru dapat diganti sesuai dengan keinginan anda.
  • Selesai
NB : jika ingin memasukkan gambar atau video, yang anda masukkan adalah kode HTMLnya

Contoh :

0 komentar em “Cara Membuat Spoiler Di Blog”

Posting Komentar

 

TIPS TRIK Copyright © 2012 Fast Loading -- Powered by Blogger