Cara membuat kotak spoiler didalam postingan blog terbaru

Daftar Isi [Tampil]

Hello sobat desain kali ini saya akan membahas bagaimana cara membuat kotak spoiler dengan Tampilan yang keren dan responsif pastinya

Oke sobat untuk tidak memperpanjang waktu saya tidak akan membahas secara detail mengenai apa itu spoiler box, sebagai pengetahuan bahwa kotak spoiler didalam sebuah website biasanya diterapkan atau dipakai untuk menyembunyikan text atau hanya menampilkan Text hanya jika tombol spoiler di klik

Dengan kata lain Anda bisa menyimpan sebuah text didalam sebuah Tombol

Tampilan Spoiler

Sobat desain bisa melihat contoh tampilan Kotak spoiler box atau Tombol spoiler dibawah ini

Silahkan Klik

Hello sobat desain, beginilah tampilan kotak spoiler box nya, kamu bisa menuliskan apapun disini atau sebanyak apapun text yang ingin kamu Tampilkan didalm Tombol spoiler

Tampilan diatas berfungsi jika kamu sudah menerapkan pemasangan kode spoiler nya ya 🥳

Cara penerapan

Sebagi informasi bahwa Kotak spoiler box ini dibuat dengan menggunakan kode CSS jadi langkah pertama untuk memulai pasang kode CSS dibawah ini teaot diatas kode ]]></b;skin> atau sebelum kode ]]></b;skin>

/* Spoiler Box Desain Limited */

.DLspoiler{display:block;margin:10px 0;border:4px solid #e8ad11;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}.DLspoiler .DLtombol{background:#e8ad11;color:#fff;display:inline-block;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:0;border:none;outline:0;line-height:20px;border-radius:3px;-moz-border-radius:3px}.DLspoiler .DLtombol:focus{pointer-events:none}.DLspoiler .DLtombol:before{content:'Lihat Spoiler';display:inline-block;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}.DLspoiler .DLtombol:focus::before{content:'Tutup Spoiler';background:#e8ad11}.DLspoiler .DLisi{background:#e4e4e4;border-left:3px solid #e8ad11;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}.DLspoiler .DLtombol:focus+.DLisi{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease}

Jika kamu paham kode CSS kamu bisa mengedit Tampilannya sendiri, ok 😎

Cara penggunaan

Untuk menggunakannya sobat desain bisa menggunakan kode pemanggil HTML untuk membuat kotak spoiler nya

Sobat bisa meletakkan atau menempatkan kodenya sesuai keinginan sobat ya, bisa dialam postingan atau dalam mode Add widget atau yang lainnya

Berikut kode pemanggil HTML untuk membuat Kotak spoiler box

<b> Judul Spoiler Anda </b>

<div class="DLspoiler">

    <div class="DLtombol" tabindex="0"></div>

    <div class="DLisi">

        <!--Isi Spoiler-->

        Tuliskan Isi Spoiler anda disini

    </div>

</div>

Nah sobat bisa menuliskan Judul beserta Isi Spoiler nya

Follow

Desain Limited Content Creator, Writer, Vidio Creator, Design Website, Design Template, Design Grafis

Bagikan Artikel ini