Membuat Spoiler Di Blogspot

Spoiler adalah suatu script yang dipakai untuk dapat menyembunyikan link, gambar, seluruh atau sebagian isi dari postingan blog kita, dan lain-lain. Spoiler ini bermanfaat sekali karena bisa menghemat tempat dan juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak melakukan loading sebelum menekan tombol show. Dengan kata lain spoiler membantu kita mengurangi waktu loading konten blog dan memberikan pilihan kepada pembaca blog untuk membuka atau tidak isi spoiler [spoiler bisa digunakan di web maupun wordpress]. Spoiler juga berguna sebagai tempat untuk menaruh kode di postingan supaya punya kesan unik, inovatif dan inspiratif seperti model yang satunya ini.

Jika tertarik, anda bisa melihat contoh dan sekaligus mengcopy script dibawahnya:

Model Pertama:

Spoiler adalah suatu script yang dipakai untuk dapat menyembunyikan link, gambar, seluruh atau sebagian isi dari postingan blog kita, dan lain-lain. Spoiler ini bermanfaat sekali karena bisa menghemat tempat dan 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 [bisa di web maupun wordpress].

Jika anda tertarik, silahkan ambil scriptnya:

<div><div style="margin: 5px;">
<div class="bigfont" style="margin-bottom: 2px;"><input value="Buka" 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Tempat menaruh link, gambar, seluruh atau sebagian isi dari postingan blog kita, dan lain-lain
</div></div></div></div>

Model Kedua:

Spoiler adalah suatu script yang dipakai untuk dapat menyembunyikan link, gambar, seluruh atau sebagian isi dari postingan blog kita, dan lain-lain. Spoiler ini bermanfaat sekali karena bisa menghemat tempat dan 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 [bisa di web maupun wordpress].

Jika anda tertarik, silahkan ambil scriptnya:

<div id="spoiler"><div><div id="show" color="transparent" style="border-style: solid; border-width: 1px; margin: 0px; padding: 4px; display: none; width: 98%;"></div><div id="spoiler"><div><input value="Show Spoiler!" style="margin: 10px; padding: 0px; width: 100px;font-size:12;" 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 = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" type="button"><br/><div id="show" style="border-style: solid; border-width: 0px; margin: 0px; padding: 4px; display: none; width: 98%;color:black;">
Tempat menaruh link, gambar, seluruh atau sebagian isi dari postingan blog kita, dan lain-lain
</span></div></div></div></div></div>

Keterangan: Anda bisa mengganti teks berwarna sesuai dengan yang diinginkan.
Selamat Mencoba dan Salam Blogging!!..

Bagi anda yang ingin belajar PHP / HTML / MySQL dengan sangat mudah sambil langsung praktek, saya sarankan untuk anda bisa belajar di sini

Bagikan