Cara Sembunyikan Isi/Content Posting Dengan Spoiler

Rabu, 16 Juni 2010

Cara Sembunyikan Isi/Content Posting Dengan Spoiler

Sebelum membahas Cara Sembunyikan Isi/Content Posting Dengan Spoiler, ada baiknya kita mengenal terlebih dahulu tentang 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:

Contoh Spoiler

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;"> Contoh Spoiler</span><input value=" Buka Dong!!!" style=" margin:5px;padding: 0px; width: 80px; 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 = ' Tutup Aah...'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = ' Buka Dong!!!'; }" type="button"/>
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
disinilah tempat untuk menaruh content dalam spoiler
</div></div></div></div>

Keterangan:

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);
Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
Teks warna Pink adalah tempat menaruh isi content postingan Anda;

Selanjutnya saya mengucapkan terima kasih atas kunjungannya dan jika ingin mendapatkan backlink dari blog ini silahkan tulis komentar.

= = = = = = = => Selamat Mencoba, Semoga Sukses!!! <= = = = = = = =

Silahkan Baca Juga Artikel Di Bawah ini:

7 Komentar:

hyswa mengatakan :): wah bagus ni blog ,, salam knal yaaaaa; 19 Mei 2011 pukul 15.22
Rock-Free® mengatakan :): Gak Berfungsi gan...; 23 Mei 2011 pukul 17.47
MWC NU DOPLANG BLORA mengatakan :): saya memasukkan kalender koq kagak muncul ya ?; 15 Juni 2011 pukul 23.38
gmoch71 mengatakan :): wah...makasi yah atas tips ya....
sangat bermanfaat sekali....; 18 Juni 2011 pukul 11.32
tips and tutorial komputer mengatakan :): mas, maaf. saya mau tanya. apakah cara membuat spoiler itu harus seribet itu dulu atau ada cara lain yang lebih praktis?

terus bagaiana untuk memasukkan gambar atau file lain di dalam spoiler itu?

Terimakasih mas; 23 Juni 2011 pukul 11.07
Yasinku Dot Com mengatakan :): MANTABBB

Kebetulan mau cari trik untuk sembunyikan post.
Pas ketemu postingan ini.

ijin cobain ya sob,

Thanks; 27 Juni 2011 pukul 06.23
TRIK BLOGGER mengatakan :): makasih Boss ilmunya..; 10 November 2012 pukul 23.00