Cara Membuat Spoiler di Postingan Blog

Cara membuat spoiler di postingan blog memang tidak semudah jika kita membuat spoiler di forum-forum karena pada dasarnya blogger tidak memfasilitasi tombol spoiler oleh karena itu kita harus mengetikan kode-kode HTML yang cukup rumit, tetapi kalian disini tidak perlu risau atau pun cemas karena sesaat lagi saya akan berbagi kode HTML-nya dan kalian hanya perlu copy & paste, mudah kan ? langsung aja ya, ini saya kasih tahu caranya :

1. Login ke blogger.com
2. Pilih entri baru atau edit salah satu postingan yang mau kalian beri spoiler
3. Masuk ke halaman HTML yang sudah disediakan di tool box

Copy & paste kode script di bawah ini (dengan mengisi spoiler)
     <div id="spoiler">
    <div><input type="button" value="Buka" style="margin:0px;padding:0px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }">
    </div>
    <div style="background: #FD0303; margin: 10px auto;
    border: 0px solid #000;
    padding: 5px;">
    <div style="display: none;">
    isi spoiler
    </div>
Hasil nya akan seperti ini :

isi spoiler

NB :
Kode yang berwarna merah bisa diganti dengan kata-kata sesuai selera kalian
Kode warna biru adalah kode warna background, juga bisa kalian ganti kodenya
Kode warna hijau adalah kode untuk mengisi spoiler, bisa diganti dengan konten tulisan, gambar ataupun video

Copy & paste kode script di bawah ini (tanpa mengisi spoiler)
     <div id="spoiler">
    <div><input type="button" value="Buka" style="margin:0px;padding:0px;" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }">
    </div>
Hasil nya akan seperti ini :

NB : Kode yang berwarna merah bisa diganti dengan kata-kata sesuai selera kalian

Copy & paste kode script di bawah ini (dengan memberi link)
<a href="http://generasi-ilmu.blogspot.com/"><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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka Lagi'; }" style="margin: 0px; padding: 0px;" type="button" value="Buka" />
Hasilnya akan seperti ini :

NB : Kode yang berwarna merah bisa diganti dengan kata-kata sesuai selera kalian dan kode berwarna oranye adalah URL spoiler

Semoga Bermanfaat... :-)