Cara Membuat Spoiler di Blog yang Bagus dan Keren

Asalamualaikum Wr. Wb.

Wahhh udah lama saya ninggalin rutinitas ngeblog saya nihh. Okedeh 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....

Nahh kodenya Seperti ini nihhh

    <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.... Contohnie 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/AVvXsEiwBhYIqv3BR88IvwD8dx9-aAJbhta1of98a86ZyoUx0WNX33Q6jK3UqIpykvG7Ny33Elm_uwb0R4SlYHu6HcYn1CxCO6pSJV5-4VW4F0upDbiXr1B7ssKtKjLIFDELd2H0mxTHgFs-75U/s320/Gambar+Lucu+13.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwBhYIqv3BR88IvwD8dx9-aAJbhta1of98a86ZyoUx0WNX33Q6jK3UqIpykvG7Ny33Elm_uwb0R4SlYHu6HcYn1CxCO6pSJV5-4VW4F0upDbiXr1B7ssKtKjLIFDELd2H0mxTHgFs-75U/s320/Gambar+Lucu+13.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...

Untuk 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="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

Kodenya Di bawah ini

 <div style="margin: 5px;"><div class="bigfont" style="margin-bottom: 2px;"><input value="Open" style="margin: 0px; padding: 0px; width: 60px;" 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'; }" type="button"></div><div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;"><div style="display: none;">LETAKKAN KODENYA DISINI</div></div></div>

 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.... Terimakasih Wasalamualaikum Wr. Wb.

By Ariflaw Blog === Semoga Bermanfaat ^_^