Spoiler merupakan salah satu fitur diblog maupun wordpress yang memiliki fungsi selain Merapikan tulisan, kode atau gambar pada postingan juga membuat blog makin menarik. Spoiler yang akan kita pasang tidak hanya bisa dipasang pada postingan tapi bisa jg dipasang pada widget2 sidebar/footer. Cara Membuat spoiler tentu sudah banyak dibahas pada blog-blog master, tapi gak ada salahnya kita bahas lagi sebagai penyegaran kembali.. terutama admin blog
Technology is Informatica ini.
Tampa berlama-2 marih segarkan kembali otak anda... :
- Cara membuat Spoiler dengan Scroll :
Copy skript berikut dan tempel pada postingan/widget anda.
<div style="margin: 3px;"> <div class="bigfont" style="margin-bottom: 2px;"> <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 = 'Lihat lagi dong !!!'; }" style="margin: 0px; padding: 0px; width: 240px;" type="button" value="Hasil spoiler" /> </div> <div class="alt2" style="border: 0px inset; margin: 0px; padding: 0px;"> <div style="display: none;"> <center><div style="border: 1px solid #0F0; height: 200px; overflow: auto; padding: 10px; width: 250px;"> Disini tempat text atau link gambar </div> </center> </div> </div> </div>
NB : warna merah adalah lebar dan nama button spoilernya. warna hijau adalah tinggi dan lebar spoilernya. silahkan ganti sesuai kebutuhan sobat.
- Cara membuat spoiler biasa atau tampa scroll
Copy skript berikut dan tempel pada postingan/widget anda.
<div style="margin: 3px;"> <div class="bigfont" style="margin-bottom: 2px;"> <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 = 'Lihat lagi dong !!!'; }" style="margin: 0px; padding: 0px; width: 240px;" type="button" value="Hasil spoiler" /> </div> <div class="alt2" style="border: 0px inset; margin: 0px; padding: 0px;"> <div style="display: none;"> <center><div style="border: 1px solid #000; overflow: auto; padding: 10px; width: 80%;"> Disini tempat text atau link gambar </div> </center> </div> </div> </div>
Sekian Tutorial
cara membuat Spoiler dengan Scroll diBlog Semoga bermanfaat sebagai penyegaran kembali.
"saya hanyalah manusia biasa yang tidak pernah luput dari kesalahan. jika ada kesalahan dalam tutorial yang saya bahas sesungguhnya itu asalnya dari saya pribadi dan yang benar itu datangnya dari sang pemilik kebenaran."