Cara Membuat Spoiler Untuk Menampilkan Dan Menyembunyikan Gambar - Layar Kerja

Cara Membuat Spoiler Untuk Menampilkan Dan Menyembunyikan Gambar

Cara Membuat Spoiler Untuk Menampilkan Dan Menyembunyikan Gambar
Sekarang Waktunya Posting Lagi sob...
Kali ini saatnya buat spoiler>>
Apa sih Spoiler itu?dan apa Tujuannya Membuat Spoiler??
Fungsi dari Spoiler itu sendiri adalah merupakan cara yang di gunakan untuk menyembunyikan suatu element sperti: link, teks, gambar atau video. Prinsip dari Spoiler adalah sistimnya buka tutup atau show hide, karena jika spoiler dalam keadaan tertutup, lalu tombol spoiler di klik atau di tekan maka element yang di sembunyikan di dalam spoiler itu akan tampil atau terbuka, Begitu juga sebaliknya jika spoiler dalam keadaan terbuka lalu kemudian tombol spoiler di klik atau di tekan maka element yang ada di dalam Spoiler akan di sembunyikan atau tertutup
Tujuan dari membuat Spoiler adalah untuk menghemat tempat, ruang atau space di dalam suatu postingan blog. Selain itu menggunaan spoiler juga bermanfaat untuk mengurangi beban loading halaman blog apabila spoiler di gunakan untuk menyembunyikan file foto, gambar atau video. 
Spoiler juga dapat di terapkan pada blog Blogger dan Wordpress. Caranya membuat atau memasangnya di blog sangatlah mudah, Karena Sobat hanya cukup dengan menambahkan Kode Script pada halaman atau page yang ingin di pasangin Spoiler.
Spoiler Untuk tulisan anda dapat mengunakkan kode berikut: 
spoieler iniberguna untuk menyembunyikan teks atau mengurangi beban loading halaman....

<div style="margin: 5px;">

<div class="smallfont" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>

<div class="alt2" style="background: #FAFAFA; border: 1px inset; margin: 0px; padding: 6px;">

<div style="display: none;">TULIS DISINI...!!</div>

</div>

</div>

Keterangan:

Silahkan anda masukan kode di atas ke dalam Pos Baru (Daftar Entri baru)> pilih tab Html

Lalu anda rubah tulisan berwarna biru dengan teks yang anda inginkan....
TULIS DISINI...!!


Spoiler untuk menyembunyikan Gambar atau Foto:

spoiler ini berguna untuk menyembunyikan foto dan menghemat load halaman blog anda jika memilki banyak postingan foto:

<div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAFA;">
<div style="display: none;"><img class="aligncenter" src="https://cdn2.tstatic.net/style/foto/bank/images/zaskia-adya-mecca_20161228_181650.jpg" alt="Cantik gan" width="500" height="400" /></div>
</div></div>

Keterangan:

Silahkan anda masukan kode di atas ke dalam Pos Baru (Daftar Entri baru)> pilih tab Html
Ganti tulisan berwarna biru dengan Alamat gambar kamu......
Lihat yuk cewek gue....hahahaha... zaskia adya mecca ....
tipe2 cewek gue ni....
Cantik gan

1 comment:


EmoticonEmoticon