Cara Membuat Kotak Spoiler Keren (Buka Tutup) di Blogger

Cara Membuat dan Memasang Spoiler Box Buka Tutup Dengan CSS di Blog Blogger dan WordPress - Spoiler Box atau kotak spoiler adalah sebuah fitur yang berfungsi untuk menyembunyikan sebuah cuplikan teks dalam postingan dan hanya bisa di lihat jika user melalukan klik pada kotak spoiler tersebut.

Spoiler box atau kotak spoiler dengan tombol buka tutup (show/hide) ini biasanya digunakan ketika kita ingin membuat sebuah halaman FAQ yang di penuhi dengan berbagai pertanyaan-pertanyaan terkait dengan blog. Selain itu, spoiler box ini juga sering digunakan pada sebuah artikel dengan topik tips, trik, informasi dan yang semisalnya.

Dan kotak spoiler ini biasanya di buat dan di rancang menggunakan script dari JavaScript atau jQuery. Karena pembuatan spoiler box dengan menggunakan JavaScript atau jQuery tergolong lebih mudah di bandingkan dengan membuat menggunakan CSS.

Tapi akan lebih baik jika membuat kotak spoiler ini menggunakan CSS. Kenapa? Ya karena penggunaan CSS lebih ringan di bandingkan dengan penggunaan JavaScript. Semakin sedikit dan minim JavaScript yang ada pada template blog kamu, pastinya akan semakin ringan juga performa loading blog kamu saat di akses.

Selain itu, pembuatan kotak spoiler (dengan tombol buka tutup) yang menggunakan CSS juga bisa kita atur sendiri desain dan bentuknya seperti apa. Contohnya seperti kotak spoiler yang akan saya berikan di artikel kali ini. Kotak spoiler buka tutup ini memiliki desain yang simpel, elegan dan nyaman di pandang dan pastinya rapih.

Bagi kamu yang ingin mencoba membuat dan menggunakan kotak spoiler buka tutup / spoiler box show and hide ini di blog, kamu bisa ikutin langkah-langkah dibawah ini. Gampang kok!

Spoiler box buka tutup ini juga bisa kamu terapkan di blog yang menggunakan WordPress. Jadi tidak terpaku pada CMS Blogger saja ya.

Cara Membuat dan Memasang Kotak Spoiler Buka Tutup Keren Dengan CSS di Blogger dan WordPress

1. Buka dashboard blogger kamu
2. Masuk ke menu Theme ➤ Edit HTML
3. Kemudian tambahkan CSS dibawah ini diatas ]]></b:skin> atau </style>

   /* Spoiler Box Style 1 By Dzuhalah */ 
   .spoilerTitle label{color:#fffdfc;background:var(--linkBg); border-radius:10px;padding:0 15px; line-height:32px;font-size:12px;font-weight:400;font-family:var(--fontB)} 
   .spoilerTitle label:before{content:'Show all'} 
   .spoilerContent{max-height:0} 
   .spoilerInput:checked ~ 
   .spoilerTitle label:before{content:'Hide all'} 
   .spoilerInput:checked ~ 
   .spoilerContent{max-height:1000vh} 
   

   Kamu bisa atur sendiri dengan mengganti warna dasar, warna font dan warna tombolnya sesuai dengan keinginan kamu
4. Kalau sudah di tambahkan ke dalam template, jangan lupa klik simpan

Nah, sampai di tahap ini CSS kotak spoiler buka tutup sudah berhasil di tambahkan ke dalam blog kamu. Jadi kamu tinggal memanggil semua elemen tadi di postingan yang kamu inginkan. Untuk kode pemanggilnya, copy dan taruh kodenya ke dalam postingan kamu pada tab HTML bukan Compose.

<div class='spoiler'>
  <input class='spoilerInput hidden' id='spoiler-01' type='checkbox' />
  <div class='spoilerTitle'>
    <!--[ Judul Spoiler ]-->
    <b>Spoiler: </b>
    <label for='spoiler-01'></label>
  </div>
  
  <!--[ Konten/Isi Spoiler ]-->
  <div class='spoilerContent'>
    <p>Taruh teks untuk di sembunyikan disini</p>
  </div>

Selain desain atau bentuk diatas, masih ada desain atau bentuk lain yang tidak kalah bagus dengan desain pertama tadi. Kamu bisa coba sendiri desain kotak spoiler yang ke dua dibawah ini.

CSS :

/* Spoiler Box Style 2 By Dzuhalah */
.spoilerme{display:block;margin:10px;padding:0;}
.spoilerme .tombol{background:#039be5;color:#fff;cursor:pointer;font:normal 600 14px Tahoma,sans-serif;padding:10px;border:none;outline:none;border-radius:3px;-moz-border-radius:3px;}
.spoilerme .tombol:before{content:'Lihat';}
.spoilerme .tombol:focus:before{content:'Tutup';}
.spoilerme .tombol:focus{pointer-events:none;cursor:pointer;}
.spoilerme .isi{background:#e4f6ff;pointer-events:auto;visibility:hidden;opacity:0;height:0;transition:all .5s ease}
.spoilerme .tombol:focus + .isi{visibility:visible;opacity:1;height:auto;margin:10px 0 5px;padding:10px 15px;transition:all .5s ease;}
.spoilerme .tombol:after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M7,15A3,3 0 0,1 4,12A3,3 0 0,1 7,9A3,3 0 0,1 10,12A3,3 0 0,1 7,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float:right;}
.spoilerme .tombol:focus::after{content:'';background-image:url('data:image/svg+xml,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M17,7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7M17,15A3,3 0 0,1 14,12A3,3 0 0,1 17,9A3,3 0 0,1 20,12A3,3 0 0,1 17,15Z" fill="%23fff"/></svg>');width:30px;height:30px;display:block;margin:-5px 5px;float: right;}

HTML :

<div class="spoilerme">
<div class="tombol" tabindex="0">
</div>
<div class="isi">
<p>Tulis judulmu di sini</p>
<p>Taruh teks/isi spoiler disini.</p>
</div>
</div>

Result Spoiler Box 2   

Nah, itu dia tutorial cara membuat kotak spoiler dengan tombol buka tutup / spoiler box show and hide button di blog yang bisa saya sampaikan di artikel kali ini. Semoga bisa bermanfaat dan membantu bagi yang membutuhkan.

Cindy NOTHING!!!

Share :