• *selamat datang di web kami*

    Pages

    Menyembunyikan Isi Tulisan dengan Spoiler


    Nah, pernah lihat ketika blogging kita disuruh ngeklick bagian tertentu kemudian muncul tulisan/gambar  yang dimaksud. itu dia salah satu bagian dari fungsi spoiler. yuk berkenalan dengan dia dan bagaimana cara kita memasang gadget yang satu ini. Oya, terima kasih untuk Bang Aymar untuk artikelnya.
    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.

    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>

    Hasilnya akan nampak seperti ini

    Contoh Spoiler



    Keterangan:
    1. 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);
    2. Teks warna Merah adalah kata perintah tombol spoiler dan boleh diganti sesuai selera Anda;
    3. 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.

    0 Sahabat bersuara:

    Post a Comment

    Terima kasih atas kunjungannya