Membuat Spoiler di Blog

Membuat Spoiler di BLog. Apakah yang dimaksud dengan spoiler? Spoiler merupakan cara untuk menyembunyikan seluruh atau sebagian isi dari konten blog kita. Spoiler juga bermanfaat agar konten yang berat seperti gambar dalam ukuran besar dan video tidak diload sebelum menekan tombol “show“. Dengan kata lain spoiler membantu kita mengurangi waktu load konten blog dan memberikan pilih kepada pembaca blog untuk membuka atau tidak isi spoiler.

Menyembunyikan konten tertentu dari sebuah halaman blog/website diperlukan untuk menghemat space. Ketika visitor ingin melihatnya mereka dapat dengan mudah menampilkannya. Berikut script yang bisa digunakan untuk membuat spoiler tersebut.

=========================================================================================

<div><div style=”margin: 5px;”>
<div style=”margin-bottom: 2px;”><i><span style=”font-weight: bold;”>Spoiler</span></i><input value=”Show” style=”margin: 0px; padding: 0px; width: 60px; 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 = ‘Hide’; } else { this.parentNode.parentNode.getElementsByTagName(‘div’)[1].getElementsByTagName(‘div’)[0].style.display = ‘none’; this.innerText = ”; this.value = ‘Show’; }” type=”button”/>
</div>
<div style=”border: 1px inset ; margin: 0px; padding: 6px;”>
<div style=”display: none;”>

Content/Isi

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

============================================================================================

Sehingga script HTML tersebut, akan memberikan hasil seperti dibawah ini.

Spoiler

Content/Isi

tyodongss

Seorang Blogger, Seorang Mahasiswa, Seorang Jomblo, Penyuka teknologi informasi, Tukang Foto Candid menggunakan Ponsel Kamera.

4 thoughts on “Membuat Spoiler di Blog

  • January 7, 2012 at 00:51
    Permalink
    Using Mozilla Firefox Mozilla Firefox 8.0 on Ubuntu Linux Ubuntu Linux

    wah menarik sekali artikelnya, trimakasih mas :)

    [Reply]

    tyodongss Reply:

    Using Google Chrome Google Chrome 16.0.912.63 on Windows Windows 7

    sip mas, monggo dicoba :)

    [Reply]

  • January 29, 2012 at 18:19
    Permalink
    Using Mozilla Firefox Mozilla Firefox 9.0.1 on Windows Windows 7

    sip2..bisa di jadikan short code di dalam wp

    [Reply]

  • April 6, 2012 at 19:54
    Permalink
    Using Mozilla Firefox Mozilla Firefox 10.0.2 on Windows Windows XP

    wah mantap tu gan infonya, akan saya cobak

    [Reply]

Leave a Reply

Your email address will not be published. Required fields are marked *