Cara Membuat Spoiler di Blogger
Jika Anda mengunjungi situs-situs forum seperti Kaskus, tentu Anda pernah menjumpai yang namanya Spoiler ini. Spoiler merupakan suatu teknik untuk menyembunyikan teks yang panjang, gambar, atau video. Spoiler dapat pula kita terapkan dalam membuat suatu artikel di Blogger. Dengan membuat spoiler ini kita dapat menghemat tempat atau ruang di halaman posting.

Untuk membuat spoiler di posting, Anda cukup menyalin kode script di bawah ini lalu menempelkannya di menu Edit HTML.

<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Spoiler</b>: <input 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Open'; }" style="font-size: 11px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Open" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">

Letakkan konten Anda di sini.

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


Keterangan:
  • Untuk tulisan Spoiler merupakan judul spoiler, Anda dapat menggantinya sesuai keinginan.
  • Tulisan Open dan Close dapat diubah sesuai keinginan Anda.
  • width: 55px; menunjukkan lebar spoiler.
  • font-size: 11px; menunjukkan ukuran huruf dalam spoiler.
  • Ganti tulisan Letakkan konten Anda di sini dengan konten yang ingin Anda masukkan ke spoiler.

Bila script di atas diletakkan di menu Edit HTML maka hasilnya akan seperti ini.

Spoiler:

Letakkan konten Anda di sini.

9 تعليقات

  1. Kalo isinya gambar gimana....???

    ردحذف
  2. @alif_cahsukoharjo Untuk mengisinya dengan gambar, sebelumnya hosting gambar tersebut terlebih dahulu, kemudian dapatkan URLnya. Lalu ganti tulisan Letakkan konten Anda di sini. dengan kode <img src="URL gambar"/>

    ردحذف
  3. Keren banget boz..langsung coba..
    Thanks ya

    ردحذف
  4. Mohon bantuannya kok nggak bisa presisi....???
    http://alif-rahmad.blogspot.com/2011/08/tes.html

    ردحذف
  5. @alif_cahsukoharjo Coba kasih center sperti ini:
    <center><img src="URL gambar" /></center>

    ردحذف

إرسال تعليق

أحدث أقدم