Spoiler atau AutoHide sering kita jumpai jika sobat sering berkunjung di
situs2 forum seperti kaskus yang membuat AutoHide untuk memaksimalkan ruang
postingan jika terdapat tulisan, foto, link yang banyak demi menghemat tempat.
Atau biasanya ada juga blogger yang jail dengan bermaksud untuk membuat pembaca
menjadi penasaran akan isinya.
Cara Membuat Spoiler di Postingan Blog sendiri sangat mudah sekali.
Yang perlu kita lakukan hanya memasang kode script pada postingan yang ingin
dipasang AutoHide. Dari pada penasaran baiknya kita langsung praktekan saja
dibawah ini, sebelumnya berikut contoh Spoiler (Buka Tutup) yang
saya terapkan pada salah satu tulisan di blog ini :
Berikut caranya :
1.
Seperti
biasa Login ke akunnya masing2
2.
Buat
Entri Baru/New Post = Membuat postingan
3.
Jika
sudah, pada menu Entri, Pilih mode penulisan HTML (Bukan Compose) jika ingin
menerapkan Spoiler/AutoHide. Jika dipasang pada Mode Compose maka tidak akan
berfungsi code scriptnya.
4.
Lalu
copas Script dibawah ini pada postingan yang akan dipasang autohide
<div
style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom:
2px;"><b>Judul Spoiler</b>:
<input value="Buka"
style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;"
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;">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px;
padding: 6px;">
<div style="display: none;">Letakkan teks atau kode script (gambar atau video), link di
sini <br>
</div>
</div>
</div>
</div>
</div>
</div>
5.
Kita
dapat merubah Judul Spoiler, Buka, Tutup dengan bahasa kita masing2, dan
Letakkan Teks, gambar, video, kode2 script, atau link yang ingin dimasukkan
didalam Spoiler
6.
Publikasikan
! dan lihat hasilnya.
Silahkan tambahkan komentar Anda, Semoga dapat sama-sama membangun. Terima kasih.
EmoticonEmoticon