Cara membuat spoiler atau hiden part 2

Mungkin temen-temen sudah lihat pada artikel sebelumnya jika blom anda bisa lihat part1 dan ini adalah lanjutan dari part1 tersebu. mengapa adan sebuah lanjutan kkarena pada part1 spoiler tersebut blom bisa memostingkan gambar dan pada artikel atau part2 ini sudah komplit alias postingan bisa dua yaitu gambar dan artikel.

namun jika ada yang belum tahu apaitu spoilerini pengertiannya, Spoiler adalah cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler

untuk itu kita langsung pada pembahasan untuk part2 ini.

sebelomnya saya akan menjelaskan sceript yang kita gunakan kurang dan lebihnya seperti ini :

<center>klik<tag></tag>
<div style="border-color: rgb(203, 203, 203); margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<i></i>  <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 = 'on'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'off'; }" style="font-size: 15px; margin: 0px; padding: 0px; width: 40px;" type="button" value="on" />

</div>

<div class="alt2" style="border: 1px solid rgb(203, 203, 203); margin: 0px; padding: 6px;">
<div style="display: none;">


******************************************************************<br>

isi postingan

******************************************************************<br>


<img alt="[Image: s5iurk.png]" border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXVqrtgBtXaCUP4OJqWIlt4tMRtrlr8MZ-bfQTo2VmEMnMIO8JiEeBYA0f_UXjqkfUN9gOCC4sTXe2km_-e-FRvv22GLXLUNFIa1cE2Uhy-tYk4gNLL0agzpI179qibrlX0VfcoDoih0U/s1600/filem+india.jpg" />

</div>
</div>
</div>
</center>

pada yang berwarna merah paling atas isi postingan jika ingin di isi jika tidah hapus tidak masalah

dan pada yang berwarna merah di bawah https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwXVqrtgBtXaCUP4OJqWIlt4tMRtrlr8MZ-bfQTo2VmEMnMIO8JiEeBYA0f_UXjqkfUN9gOCC4sTXe2km_-e-FRvv22GLXLUNFIa1cE2Uhy-tYk4gNLL0agzpI179qibrlX0VfcoDoih0U/s1600/filem+india.jpg sesuaikan dengan gambar yang anda inginkan 

dan ini cara menggunakan nya Kode HTML diatas akan memberikan hasil seperti dibawah ini:

Cara meggunakannya yaitu pertama login pada blog anda setelah itu pilih new posting. Biasanya kalau kita posting kita langsung pada COMPOSE jiuka kita akan menggunakan spoiler maka kita gunakan yang edit HTML seperti gambar berikut

 Setelah kita siapkan maka kopy scrip di atas tadi dan pastekan di dalam EditHTML dan ubah atau ganti yang berwarna merah dengan kebutuhan anda dan jika mau memosting yang akan di munculkan langsung kita kembali atau klik COMPOSE setelah merasa cukup atau selesai klik PUBLIK POST dan ini hasilnya dari SPOILER

mungkin itu tambahan dari part1 dan ini hasil dari part2

klik