Spoiler Ala AJIP

Asalamualaikum Wr. Wb. Fasilkom-Esa Unggul :Pada kesempatan yang baik ini saya akan memberikan sebuat trutorial mengenai " Cara Membuat Spoiler di Blog yang Bagus dan Keren ". Sebenarnya sih cara cara ini udah banyak yang publis tapi siapa tau udah cari- cari pengin yang simpel nga nemu-nemu. Nahh di sini saya mencoba untuk memberikan caranya nga hanya satu cara aja mungkin beberapa cara untuk membuatnya dengan berbagai model.

Saya coba kembangkan kode Spoiler yang sudah berkembang dengan sedikit editan supaya ya....lebih menarik di lihatnya nga biasa aja gitu  heee. Ya maklum lahh kalo hasilnya jelek nga sebagus yang kalian ingginkan yaa...Tapi tetep fugsinya saya supaya menghemat lahan Blog haa...Biar nga begitu panjang ataupun lebar kan bisa di tutup dengan widget ini. betul tidak.

Sebenarnya Spoiler ini nga hanya bisa di gunain buat widget aja, tapi juga bisa buat di postingan misalnya mau posting gambar tapi di buat Spoiler gitu. Kan jadinya menghemat ruang trus pandangan soalnya gambarnya di buat spoiler tapi tetep walaupun lamanya agag kosong kuota buat bukannya cukup lumayan besar kan yang di panggil gambar hee..

Oke dehh langsung aja yahhhh Spoiler Jenis yang Pertama....

 
 Nah Kodenya Seperti Ini

<div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display= 'none';    this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT"/></div><div id="show" style="border: 1px solid white;display: none; margin: 5px; padding: 2px; width: 98%;"><pstyle="text-align: justify;">Letakkan Kode yang Dsembunyikan Disini</p></div><div id="hide"></div></div></div>

Yang warna Biru silahkan kalian isi dengan yang kalian ingginkan.... Contoh nie yang saya pake di Atas Tuhh pake gambar kaya gini niee cara memasukannya...

 <div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display= 'none';    this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="LIHAT"/></div><div id="show" style="border: 1px solid white;display: none; margin: 5px; padding: 2px; width: 98%;"><pstyle="text-align: justify;"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0kNNmesCS0POcevOhYFyWaIriWceJzg5A_Rmwd4GPWgeAnMIYRzYmveBKXVlYsc2vO1ySYCDTVVszmedKCCe0vt-HKbDC5YjQZ3NjAIvZP4Z5hskj5hvAuKwcJgrCaC2frLM8Sq67zjd/s400/DSC09495.JPG" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjN0kNNmesCS0POcevOhYFyWaIriWceJzg5A_Rmwd4GPWgeAnMIYRzYmveBKXVlYsc2vO1ySYCDTVVszmedKCCe0vt-HKbDC5YjQZ3NjAIvZP4Z5hskj5hvAuKwcJgrCaC2frLM8Sq67zjd/s400/DSC09495.JPG" /></a></p></div><div id="hide"></div></div></div>

Kaya gitu tuhh masangnya.....

Untuk jenis yang kedua Ini Bedanya cuman Pake Backgroud Belakang  aja tapi ini lumayan keren loo...

 <div id="spoiler"><div><input style="font-size: 11px; font-weight: bold; margin: 5px; padding: 0px;"onclick="if(this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display!= ''){this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display= '';this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'TUTUP';} else {    this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none';    this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display=''; this.innerText = ''; this.value = 'LIHAT LAGI'; }" name="button" type="button" value="BUKA" /></div><div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;"><div style="color: #000000; background: none repeat scroll 0% 0% #ebf3fb; border: 1px solid #aaccee; padding: 7px; margin: 0px;"><pstyle="text-align: justify;">LETAKKAN KODENYA DISINI</p></div><div id="hide"></div></div></div>

Seperti biasa yang warna Biru... di ganti pake kode-kode yang pengin kalian masukan. Cara masangnya hampir sama seperti yang ada di atas brooo...

Kalo yang Ke Tiga ini Jenis spoiler yang pake Garis Tepi /jenis yang sama kaya di Kaskus Spoilernya ..... Liat aja Dehhh di bawah ini

Yang Biruu... Ganti deh dengan kode yang kalian ingginkan haaaa....


Wahhh gimana tuhh Spoilernya keren keren kan, di sini saya contohin yang buat Postingan tapi jangan kuatir kalo pengin masang di Sidebar blog kalian, karna caranya sama kok...>>>>  Kalian Tinggal tambahkan Gadged trus Pilih HTML/Javascrip trus copy codenya dan masukin dehh kode-kode yang pengin kalian masukan misalnya mengenai Link Sahabat, Trafik Blog, Informasi Blog, dll. Kalian tinggal masukin aja Trus Simpan dan liat hasilnya .

Nahh gimana niehh trutorial Cara Membuat Spoiler di Blog yang Bagus dan Keren pastinya mudahkan ?? yaa gitu dehh tinggal masukin aja kodenya seperti di atas dan kalo binggung itu ada contohnya.. Oke dehh udah dulu ya... kia ketemu di posting yang selanjutnya. Bila ada tutur kata yang kurang pas saya Mohon Maaf yang sebesar besarnya.... Salam AJIP (Anak Jadul Ingin Pintar)