membuat spoiler keren di blog

Masih melanjutkan pembahasan tentang spoiler pada pembuatan blog baik itu flatform blogspot . cms wordpress joomla ataupun flatform bloger lainnya, walaupun memang penggunaan spoiler ini kebanyakan di pergunakan di forum kaskus, Namun bukan berarti spoiler ini di monopoli oleh yang empunya kaskus yaa, neng yang menggunakan blogspot pun dapat menggunkan spoiler ini untuk menyembunyikan script yang dirasa terlalu panjang untuk di tampilkan pada artikel yang di buat ini adalah trends yang positif terlebih lagi bagi sahabat yang biasa menggunakan blognya sebagai blog tutorial yang banyak menggunakan gambar dan script bisa menghemat ruangan artikel yang penuh sesak dengan script dan gambar namun sebelumnya silahkan sobat baca baca terlebih dahulu pembahasan tentang spoiler ini di dalam dua artikel sebelumnya yang menjelaskan secara detail spoiler di blog ini:
1.membuat spoiler buka tutup dengan keterangan

2.cara membuat spoiler di blog dengan tanpa menggunakan keterangan

Setelah membaca dua artikel sebelumnya tentulah sahabat dapat membedakan dengan spoiler yang satu ini bentuk variasi spoiler yang satu ini menggunakan button berwarna yang warnanya dapat diatur sesuai dengan keinginan kita , selain itu spoiler yang satu ini akan tampak meloncat kebawah pada saat spoilernya ini di klik daripada penasaran, lihat saja penampakannya :

Contoh spoiler dan kodenya


<div id="spoiler" style="display: none;">
<center>
<a href="link FILE" title="Download"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9n79viwn3SMViBKeErucb5KMW76jsyKfeK9IYWOxHlvN_ZMQhZ1ZTL-9PPDF_9OuQvDI5j6ek4IGYhY9DKhN0bG1jN6WTMIwBX73-DRJnJjIOLwWrMYXc0JFH_aQ6LDWDRl-66hMNtkY/s1600/download+dc+nimbuzz+symbian.gif" alt="KET FILE" height="73" width="215" /></a></center>
</div>
<button onclick="if(document.getElementById('spoiler') .style.display=='none') {document.getElementById('spoiler') .style.display=''}else{document.getElementById('spoiler') .style.display='none'}" style="background: green; border: 1px solid blue; color: white; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">DOWNLOAD DI SINI</button></div>

Silahkan copy paste di disini

Lihat pada value spoiler kata ini dapat di ganti sesuka hati terlebih lagi apabila kita menggunakan lebih dari satu spoiler dalam satu halaman artikel karena apabila value spoiler ini tidak di ganti maka akan berdampak double open pada spoiler yang lainnya
Pada value <center><a href="link FILE" title="Download"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGCP1IRENbGyke9ee83qnaEVlTH1qN6P6DJhnuh_XEXNlDuqChZ2amULvcXRWjRPNcmIscFU-5Ebxivf-cKie6XPwevzpKl2qIwmhZrXoXH-ONlqTrKjcv31Pe6F4PjQFoyw_OI8Hm_E4/s320/spoiler+warna+warni+webtool31.jpg" alt="KET FILE" height="73" width="215" /></a></center> dapat sahabat ganti dengan gambar apapun
Ubahlah kode warna ini dengan warna sesuai dengan yang sahabat inginkan green disini cara menggunakan kode warna html
Selanjutnya pada nilai 4px 45px 4px 45px dapat sebat ganti dengan angka yang di kehendaki value ini untuk menentukan besar kecilnya button spoiler berwarna ini
Dan pada kalimat DOWNLOAD DI SINI sobat dapat menggantinya dengan keterangan yang menyatakan isi dari spoiler tersebut kalimat ini yang nantinya akan uncul dalam spoiler yang sahabat buat

Apabila spoiler yang di atas terlihat seakan akan button nya meloncat ke bawah, maka spoiler berikut ini bergerak statis

(tidak bergerak sama sekali) lihat dan coba :

Untuk mendapatkan kode scriptnya silahkan ambil di bawah ini:


<button onclick="if(document.getElementById('spoilerSTATIS') .style.display=='none') {document.getElementById('spoilerSTATIS') .style.display=''}else{document.getElementById('spoilerSTATIS') .style.display='none'}" style="background: lime; border: 1px solid blue; color: white; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">Spoiler tidak bergerak</button></div>
<div><div id="spoilerSTATIS" style="display: none;">
<center>
<a href="URL FILE" title="Download"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh9n79viwn3SMViBKeErucb5KMW76jsyKfeK9IYWOxHlvN_ZMQhZ1ZTL-9PPDF_9OuQvDI5j6ek4IGYhY9DKhN0bG1jN6WTMIwBX73-DRJnJjIOLwWrMYXc0JFH_aQ6LDWDRl-66hMNtkY/s1600/download+dc+nimbuzz+symbian.gif" alt="KET FILE" height="74" width="216" /></a></center>
</div>

textarea Code Select All

bentuk variasi dari spoiler buka tutup dengan button berwarna

Untuk melakukan modifikasi terhadap spoiler dengan button berwarna ini ,kta dapat menambahkan seperti yang sudah neng bahas dalam artikel yang pertama dan kedua,

Tentu saja kita dapat menggunakan button spoiler ini untuk menyembunyikan script ,
Menambahkannya dengan mode text area
Dan menambahkan variasi bentuk dari spoiler ini sesuai dengan keinginan sahabat
Spoiler button berwarna untuk menyembunyikann gambar

Menggunakan spoiler ini untuk menyembunyikan script

Kita akan mencoba menggunakan spoiler ini untuk menyembunyikan script ataupun html atau text apapun

Berikut ini adalah kode script intuk membuat spoiler seperti yang diatas


<div id="script" style="display: none;">
<div style="width:95%;border:1px solid #708090;background:#ddd;padding:2px;margin:0 auto">
<div style="font-size:100%;border:1px solid white;background:#eee;color:#333;padding:2px;margin:2px">
GANTI DENGAN TEXT 
</div>
</div>
</div>
<button onclick="if(document.getElementById('script') .style.display=='none') {document.getElementById('script') .style.display=''}else{document.getElementById('script') .style.display='none'}" style="background: grey; border: 1px solid blue; color: white; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">KLIK UNTUK BUKA SCRIPT</button></div>

textarea Code Select All

kalau tidak suka dengan spoiler yang di atas, sobat dapat menggunakan spoiler yang ini
spoilernya statis (tidak bergerak) script yang di sembunyikannya akan bergerak

Dan inilah kode script untuk membuat spoiler dengan text muncul ke bawah


<div><button onclick="if(document.getElementById('bukakebawah') .style.display=='none') {document.getElementById('bukakebawah') .style.display=''}else{document.getElementById('bukakebawah') .style.display='none'}" style="background: lime; border: 1px solid blue; color: white; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">KLIK UNTUK BUKA SCRIPT </button></div>
<div id="bukakebawah" style="display: none;">
<div style="width:95%;border:1px solid #708090;background:#ddd;padding:2px;margin:0 auto">
<div style="font-size:100%;border:1px solid white;background:#eee;color:#333;padding:2px;margin:2px">
GANTI DENGAN script atau TEXT
</div>
</div>
</div>

textarea Code Select All

Menggabungkan spoiler dengan text area

Istirahat dulu ahh mata dah lelah niee

Ini adalah kode spoiler yang di gabungkan dengan textarea


<button onclick="if(document.getElementById('spoilertextarea') .style.display=='none') {document.getElementById('spoilertextarea') .style.display=''}else{document.getElementById('spoilertextarea') .style.display='none'}" style="background: white; border: 2px solid grey; color: black; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">Spoiler dengan text area</button></div>
<div><div id="spoilertextarea" style="display: none;">
<div style="width:100%;border:1px solid #708090;background:#ddd;padding:2px;margin:0 auto">
<div style="font-size:95%;border:1px solid white;background:#eee;color:#333;padding:2px;margin:2px"><div class="css textarea">
<center>silahkan ambil kodenya di bawah</center>
<br>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto;" wrap="VIRTUAL">



</textarea></div>
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All Code" type="button"> </div>
</form>
</div>
</div>

</div>
</div>

textarea Code Select All

<button onclick="if(document.getElementById('spoilertextarea') .style.display=='none') {document.getElementById('spoilertextarea') .style.display=''}else{document.getElementById('spoilertextarea') .style.display='none'}" style="background: white; border: 2px solid grey; color: black; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">Spoiler dengan text area</button></div>
<div><div id="spoilertextarea" style="display: none;">
<div style="width:100%;border:1px solid #708090;background:#ddd;padding:2px;margin:0 auto">
<div style="font-size:95%;border:1px solid white;background:#eee;color:#333;padding:2px;margin:2px"><div class="css textarea">
<center>silahkan ambil kodenya di bawah</center>
<br>
<form name="copy">
<div align="center">
<textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto;" wrap="VIRTUAL">

</textarea></div>
<div align="center">
<input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All Code" type="button"> </div>
</form>
</div>
</div>

</div>
</div>

<button onclick="if(document.getElementById('spoilertextarea') .style.display=='none') {document.getElementById('spoilertextarea') .style.display=''}else{document.getElementById('spoilertextarea') .style.display='none'}" style="background: white; border: 2px solid grey; color: black; padding: 4px 45px 4px 45px;" title="Klik untuk membuka spoiler" type="button">Spoiler dengan text area</button></div> <div><div id="spoilertextarea" style="display: none;"> <div style="width:100%;border:1px solid #708090;background:#ddd;padding:2px;margin:0 auto"> <div style="font-size:95%;border:1px solid white;background:#eee;color:#333;padding:2px;margin:2px"><div class="css textarea"> <center>spoiler</center> <br> <form name="copy"> <div align="center"> <textarea cols="50" name="txt" rows="5" style="max-width: 95%; min-width: 250px; overflow: auto;" wrap="VIRTUAL"> #isi dengan kode script yang telah di encode </textarea></div> <div align="center"> <input onclick="javascript:this.form.txt.focus();this.form.txt.select();" value="Select All Code" type="button"> </div> </form> </div> </div> </div> </div>

sebagai catatan saja

Apabila sahabat menggunakan kode spoiler di atas , dan menggunakan nya secara berulang pada satu artikel harap ganti kode yang di beri warna ini
Kode yang berwarna merah (spoilertextarea) harap di ganti setiap kali kita akan membuat spoiler yang berulang dalam satu artikel dengan kata apa saja misalnya : sipolieur heheheh juga bisa
Kode yang berwarna hijau (spoiler) tidak perlu di ganti atau apabila ingin menggantinya pun tidak apa apa apabila ingin mengisi kata yang di beri warna biru ( #isi dengan kode script yang telah di encode ) dengan script mohon untuk memparsenya terlebih dahulu
Apabila tidak di ganti kode spoilertextarea nya maka akan berakibat pararel artinya satu spoiler di klik maka spoiler lainnya juga akan ikut terbuka
Jangan membuat spoiler ini dalam mode compose karena kadang setelah posting di terbitkan spoilernya jadi tidak berfungsi lihat gambar di bawah ini:

Setelah mempelajari aneka macam bentuk spoiler untuk membuat artikel kita semakin fastloading silahkan sobat mencobanya sendiri di tool test spoiler di bawah ini:
Namun ganti terlebih dahulu kode yang di tandai yaa: