MASIGNALPHA101
6536304137350128937

Cara Membuat Tampilan Spoiler Box Style Show Hide Keren Responsive Dan Fast Loading

Cara Membuat Tampilan Spoiler Box Style Show Hide Keren Responsive Dan Fast Loading
12/02/2018

Baca Juga

Hallo sahabat agus-jenro.com..... di pertemuan kali ini saya akan membagikan sebuah maha karya dari sang master blogger 😀 yaitu tutorial "Cara Membuat Tampilan Spoiler Box Style Show Hide Keren Responsive Dan Fast Loading". Pasti penasaran kan apa itu spoiler box atau kotak spoiler ??? sebagian orang pasti sudah ada yang tau apa itu spoiler apalagi mereka - mereka yang sering mampir atau berdiam diri di forum - forum.

Spoiler Box atau Kotak Spoiler adalah sebuah kotak yang berfungsi untuk menyembunyikan konten, dan akan muncul ketika si pembaca konten melakukan aktivitas klik pada tombol spoiler tersebut. Umumnya spoiler box menampakkan tampilannya dengan gaya buka / tutup, sebagian orang ada yang menyebutnya show / hide. Spoiler box tersebut kebanyakan dibuat dengan menggunakan javascript atau jQuery karena lebih gampang, tapi di tutorial kali ini saya akan Membuat Tampilan Spoiler Box Style Show Hide dengan menggunakan CSS. Mengapa menggunakan CSS? karena dengan menggunakan javascript yang tidak terlalu banyak, maka akan mempercepat loading blog. Lalu bagaimana Cara Membuat Tampilan Spoiler Box Style Show Hide yang Keren dan Responsive ini ? simak tutorialnya baik - baik 😊


1. CSS

Hal utama yang harus dilakukan dalam membuat spoiler box (show / hide) pure CSS ini tentu saja menambahkan kode CSS terlebih dulu. Tambahkan kode berikut "SEBELUM / DI ATAS" ]]></b:skin> atau </style>.
/* Spoiler Box Pure CSS by IGNIEL.COM */
.ignielSpoiler {
    display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol {
    background:#3498db; /* Warna tombol */
    color:#fff; /* Warna tulisan di tombol */
    display:inline-block; cursor:pointer; font:normal 600 14px Tahoma,sans-serif; padding:0px; border:none; outline:none; line-height:20px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus {
    pointer-events:none;
}
.ignielSpoiler .tombol:before {
    content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
    display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.ignielSpoiler .tombol:focus::before {
    content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
    background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.ignielSpoiler .isi {
    background:#e4e4e4; /* Warna background isi spoiler */
    pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.ignielSpoiler .tombol:focus + .isi {
    visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}

2. HTML

Kode HTML ini berfungsi untuk memanggil kotak spoilernya. Gunakan kode berikut di dalam postingan setiap kali mau menggunakan spoiler.
<div class="ignielSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        <!-- Isi Spoiler -->
        Tulis apa kata hatimu disini :v .
    </div>
</div>

3. Demo / Preview

Hasil akhirnya silahkan kalian lihat sendiri dibawah ini.

Ingatlah dua keuntungan dari kegagalan. Pertama, jika kita gagal,kegagalan mengajarkan kita menghindari apa-apa yang salah.Kedua, kegagalan memberi kita kesempatan mencoba cara-cara baru.

Jangan pernah lari dari masalah, mereka akan selalu temukan dirimu. Hadapilah, mereka akan buatmu menjadi pribadi yang lebih kuat.

Bagaimana ? Mudah kan Cara Membuat Tampilan Spoiler Box Style Show Hide Keren Responsive Dan Fast Loading diatas. Saya memang lagi seneng banyak-banyakin pake CSS dibanding Javascript. Kalau ada fungsi Javascript yang bisa digantikan oleh CSS kenapa nggak dicoba. Biar lebih ringan dan fast loading blognya 😹

Antonio Ferguso

Saya hanyalah seorang blogger pemula yang suka mengintai para senior blogger lewat postingan mereka, untuk mempelajari hal baru tentang dunia blogger yang masih belum saya mengerti. Jadi tidak ada salahnya mengintai untuk hal kebaikan dan kebenaran :D

Berkomentar adalah hak asasi bagi semua pengguna internet dan akan berdampak kembali kepada diri masing - masing, maka berkomentar dengan bahasa yang baik dan sopan adalah suatu hal positif dan sangat dianjurkan.