Spoiler ini berguna untuk menyembunyikan text, kode, kalimat ataupun gambar maupun video dalam postingan blog. spolier ini berguna untuk menghemat ruang dalam sebuah postingan blog serta untuk membuatnya kelihatan lebih rapi. namun spoiler bukan hanya berguna dalam postingan blog, namun juga berguna untuk widget side bar atau lainnya dalam blog
Berikut contoh spoiler
Klik Show Untuk Membuka Spoiler
untuk contoh diatas berikut ini adalah kodenya :
<div style="margin-bottom: 2px;">Klik Show Untuk Membuka Spoiler
<div style="margin-top: 5px; text-align: center;"><input value="Show" style="margin-top: 5px; width: 60px; font-size: 10px;" 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'; }" type="button"> </div>
<div style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">Memasang spoiler di blog sangat mudah Inilah kode untuk membuat spoiler dengan teks </div></div></div>
keterangan : yang berwarna biru ubahlah dengan text yang kamu suka
yang berwarna merah bisa kamu ganti dengan judul yang ingin berikan
2. memasang spoiler untuk gambar atau hal lain
contohnya :
Spoiler :
Berikut untuk kode contoh tersebut :
<div style="margin: 5px 20px 20px;"><div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; text-align: left;">
<div style="display: none;">
<img src="http://i1311.photobucket.com/albums/s675/one7die/cth_zpsdd760d2b.jpg" border="0" alt="Post spoiler"></div>
</div>
</div>
keterangan : yang berwarna Merah merupakan kode URL gambar atau image yang Kamu punya..
Sekian.. dan selamat mencoba.
Artikel Terkait:
Belajar Desain Blog
- Cara Menonaktifkan Fungsi CTRL-C,A, dan U Pada Blog
- Mempercepat Loading Blog
- Cara Membuat Widget Label Dua Kolom
- Membuat Read More Otomatis
- Cara MengUpload File Js/Java Script di Google Code
- Memasang Energy Saving Mode dengan Gambar
- Menambahkan Kotak Scroll di Posting Blog
- Pilihan Label Cloud Keren
- Memasang Widget Cumulus Label Cloud Dengan Mudah
Tutorial
- Cara Masuk Safe Mode Windows 8/8.1
- System Restore : Mengatasi "Black Screen" di OS Windows 7/8/8.1
- Cara Backup/Restore Bookmark di Google chorme & Mozilla firefox
- Cara Download File Torrent Dengan IDM
- Cara Download Video di Youtube
- Menghapus Virus Shortcut di Flashdisk dan komputer
- Cara Mematikan Autorun Windows 7
- Membuat File Autorun
- Mencegah Virus Dengan Mendisable Autorun Pada Windows XP
- Memasang Energy Saving Mode dengan Gambar
