AF Sahabat ArtikelCara Membuat Spoiler (AutoHide) di Blog. Berhubung ada sahabat blogger yang bertanya bagaimana Cara Membuat Spoiler di Blog seperti dalam postingan blog, maka kali ini saya akan mensharenya. 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 beberapa 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;">
Letakkan teks atau kode script (gambar atau video), link di sini  <br>
</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
Contoh yang saya buat :
Cantik-cantik tapi ko gini ya ??:

Selamat Mencoba !!!

13 komentar:

  1. ini bisa buat Spoiler Di forum juga ga ?

    ReplyDelete
  2. buat abyfarhan makasih bgt,,,,lg butuh bgt ni,,makasih y ,,kalau bisa kunbal jg y

    ReplyDelete
  3. Kunjungan ..di membuat spoiler . Happy blogging

    ReplyDelete
  4. thx Gan
    Spoilernya da berhasil
    blogwalking

    ReplyDelete
  5. Makasih Ilmu nya Gan, Silahkan berkunjung disini agan-agan semuanya
    http://panduanprofitclicking-jbp.blogspot.com

    ReplyDelete
  6. no work kunjingi blog ane juga gan http://dedongkot-kotel.blogspot.com

    ReplyDelete
  7. makasi gan dah saya coba n berhasil, utk sementara sih lom diperlukan tapi kodenya dah saya save klo diperlukan nanti, mampir jga gan ke http://ivanafx.blogspot.com

    ReplyDelete
  8. oke, thanks berbagi, berhasil nih

    ReplyDelete
  9. menarik banget gan
    Spoilernya Udah ane coba dan Berhasil thank ya gan..!

    ReplyDelete
  10. wah..guys thanks bgt y info share-ingnya
    ditunggu kunjungan baliknya ^_^

    ReplyDelete

Terima Kasih atas kunjungan dan komentarnya pada Blog ini. Thanks atas setiap Komentar, Masukkan, Saran, dan Kritik Y dapat membangun blog ini agar lebih baik lagi kedepannya. Berkomentarlah sesuai dengan Isi Bahasan Artikel. Mohon dengan Sangat Kepada Sobat-sobat untuk tidak berkomentar Y berbau unsur:
- Sara
- Pornografi
- No Spam !!! [Komentar menyertakan link aktif akan otomatis terdelete]
Terima Kasih atas Kunjungannya Sobat,,
Salam Sukses dari AF Sahabat Artikel

 
Top