Cara Membuat Spolier Di Blogspot

Terkadang jika kita membuat atau menulis artikel tentang tutorial blog memakai kode HTML yang terlalu panjang akan membuat pengunjung kita menjadi bosan. Untuk menyikapi hal itu, maka kita harus menyembunyikan sebagian konten postingan tersebut yaitu dengan menggunakan spoiler. Spoiler adalah tehnik untuk menyembunyikan seluruh atau sebagian isi dari Content posting, dengan tujuan untuk menghemat space halaman posting dan mengurangi lamanya waktu loading web/blog, dimana misalnya posting tanpa spoiler loading memakan waktu 45 detik, maka jika dengan Spoiler cukup dengan 30 detik bahkan bisa kurang (tergantung dari isi content).

Fungsi Spoiler adalah selain untuk menyembunyikan content berupa text dan kode juga bisa untuk sembunyikan gambar dalam ukuran besar serta video. Cara Kerja Spoiler adalah, content yang ditaruh di dalam spoiler hanya bisa dilihat seluruhnya oleh pembaca apabila tombol perintahnya diklik. Untuk membuktikannya silahkan Anda klik tombol spoiler di bawah ini:

Judul Spoiler

Tulisan teman-teman yang ingin disembunyikan bisa ditampilkan disini

Cara pasang spoiler pada postingan blog/website bukanlah hal yang sulit, karena kita tinggal memasukan isi content ke dalam kode HTML dan menaruhnya dalam content posting, sedangkan yang sulit itu adalah membuat kode-kode HTML-nya, betul khan? Adapun kode HTML yang untuk membuat spoiler pada posting blog/website adalah sebagai berikut:

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

<div class="smallfont" style="margin-bottom: 2px;"><span style="font-weight: bold;"> Judul Spoiler</span><input value=" Jangan Dibuka" style=" margin:5px;padding: 0px; width: 100px; font-size: 11px;" 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 = ' Jangan Ditutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Jangan Dibuka'; }" type="button"/>

</div>

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

<div style="display: none;">

Tulisan teman-teman yang ingin disembunyikan bisa ditampilkan disini

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

Keterangan:

1. Teks warna Biru adalah Judul Content dan boleh diganti sesuai selera Anda, namun jika tidak ingin menampilkan judul content pada spoiler, silahkan dihapus saja dan nilai margin saya kasih warna biru silahkan diganti menjadi 0 (nol);
2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
3. Teks warna Pink adalah tempat menaruh isi content postingan Anda;

Apakah penjelasanya cukup jelas? Saya rasa cukup mudah dimengerti, jadi sampai disini tutorial membuat spoiler di blog ini. Selamat mencoba dan semoga bermanfaat.

Socializer Widget By Blogger Yard

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →