Cara Membuat Kotak Spoiler (Show-Hide Button)

Spoiler Box CSS

Tombol show and hide atau yang biasa disebut Kotak spoiler adalah sebuah kotak yang berisi suatu kata atau informasi yang tersembunyi hingga pengunjung mengklik tombol show atau tampilkan. biasanya kotak spoiler dibuat menggunakan JavaScript.

Tetapi kali ini saya ingin membagikan tutorial yang agak sedikit berbeda, yaitu Cara Membuat Kotak Spoiler Menggunakan CSS, seperti dari judulnya, tutorial kali ini tidak menggunakan javascript melainkan hanya menggunakan CSS saja.

Apa alasannya? selain agar berbeda dengan lainnya, menggunakan CSS saja juga dapat meningkatkan kecepatan loading situs kita. Lebih sedikit penggunaan JavaScript berarti lebih sedikit pembengkakan kode (dan kinerja yang lebih baik), maka dari itu tutorial kali ini saya akan memberikan tutorial yang hanya menggunakan CSS saja, jika kalian tertarik, simak tutorial berikut.

Cara Buat Kotak Spoiler Blogger

• Pertama, tambahkan dahulu CSS berikut ke blog kalian. taruh diatas ]]></b:skin>.

   /* Spoiler Box Pure CSS */
  .infoSpoiler{display:block;margin:10px 0;border:1px solid #3498db;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
  .infoSpoiler .tombol{background:#3498db;/* Warna tombol */
      color:#fff;/* Warna tulisan di tombol */
      display:inline-block;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:0;border:none;outline:none;line-height:20px;border-radius:3px;-moz-border-radius:3px}
  .infoSpoiler .tombol:focus{pointer-events:none}
  .infoSpoiler .tombol:before{content:'Lihat Spoiler';/* Tulisan untuk membuka tombol */
      display:inline-block;padding:7px 10px;border-radius:3px;-moz-border-radius:3px}
  .infoSpoiler .tombol:focus::before{content:'Tutup Spoiler';/* Tulisan untuk menutup tombol */
      background:#cc0000;/* Warna tombol ketika spoiler terbuka */}
  .infoSpoiler .isi{background:#e4e4e4;/* Warna background isi spoiler */
      pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}
  .infoSpoiler .tombol:focus + .isi{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease}
  

• Jika sudah, kita terapkan tombol spoiler ke artikel, dengan copy kode berikut ke artikel kalian. jangan lupa ubah ke tampilan HTML.

  <div class="infoSpoiler">
      <div class="tombol" tabindex="0"></div>
      <div class="isi">
          <!-- Isi Spoiler -->
          tulis apa yang ingin kalian sembunyikan disini.
      </div>
  </div>

• Jika sudah, kalian bisa publish artikel kalian. demo:
  Spoiler:

  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vestibulum dignissim diam, et efficitur felis commodo et. Mauris vel diam pellentesque lorem lacinia luctus. Nulla quam magna, pharetra in ultrices at, condimentum id tellus. Sed suscipit sapien sed turpis ultrices viverra. Ut quis dui sed odio sollicitudin fermentum. Aliquam vitae metus laoreet, dapibus enim sit amet, feugiat lorem. Sed in dui purus.

  Akhir Kata

  Gimana, mudah kan. mungkin itu saja tutorial dari saya kali ini. jika kalian punya saran dan pertanyaan, silahkan komen dibawah, terimakasih.