Spoiler merupakan sebuah efek show/hide yang biasa digunakan untuk menyembunyikan konten berupa teks, gambar, maupun video. Untuk yang sering ikut forum seperti kaskus mungkin sudah tidak asing lagi dengan yang namanya show hide spoiler.
Cara kerja spoiler yaitu saat kita mengeklik tombol spoiler maka otomatis teks, gambar, maupun video yang disembunyikan pada sppoiler akan muncul.
Fungsi spoiler yaitu menyembunyikan konten yang mungkin tidak terlalu penting agar tidak terlalu mengganggu pembaca, juga dapat memperindah atau menambah estetika tampilan postingan blog kalian.
Show hide spoiler di tutorial kali ini dibuat hanya dengan HTML dan CSS saja yang pastinya tidak akan memberatkan blog.
Terdapat 3 style pilihan yang pastinya keren keren dan bisa dipilih sesuai hati. Tak hanya itu, sobat blogger juga bisa memasang semua style di blog anda.
Berikut preview dari ke 3 style spoiler tersebut
Daftar isi
Cara Membuat Show Hide Spoiler Pure CSS di Blog Blogger
Pertama masuk ke template editor blogger.
Cara masuk template editor yaitu dengan login ke Dashboard Blogger, pilih Theme atau Tema, kemudian pada tema saya pilih panah kecil disamping sesuaikan, kemudian pilih “Edit HTML”.
Kemudian copy paste kode CSS berikut sebelum atau diatas
]]></b:skin>Kode CSS
Style 1
/* Show Hide Spoiler Reboza Sambirejo Style 1 */
.titleSpoiler{display:flex;align-items:center}
.spoiler input[type="checkbox"] + .titleSpoiler + .isiSpoiler{transition:visibility 0s linear 0.33s,opacity 0.33s linear;visibility:hidden;opacity:0}
.spoiler input[type="checkbox"]:checked + .titleSpoiler + .isiSpoiler{visibility:visible;opacity:1;transition-delay:0s}
.isiSpoiler{display:block;margin-top:8px;padding:8px 12px;border:1px solid rgba(0,0,0,.1);border-radius:2px;font-size:13px}
.toggle{position:relative;display:block;width:40px;height:20px;cursor:pointer;-webkit-tap-highlight-color:transparent;transform:translate3d(0,0,0);margin-right:5px}
.toggle::before{content:"";position:relative;top:3px;left:3px;width:34px;height:14px;display:block;background:#9A9999;border-radius:8px;transition:background .2s ease}
.toggle span{position:absolute;top:0;left:0;width:20px;height:20px;display:block;background:white;border-radius:10px;box-shadow:0 3px 8px rgba(154,153,153,0.5);transition:all .2s ease}
.toggle span::before{content:"";position:absolute;display:block;margin:-18px;width:56px;height:56px;background:rgba(#4F2EDC,.5);border-radius:50%;ransform:scale(0);opacity:1;pointer-events:none}
.spoiler input[type="checkbox"]:checked + .titleSpoiler .toggle::before{background:#947ADA}
.spoiler input[type="checkbox"]:checked + .titleSpoiler .toggle span{background:#4F2EDC;transform:translateX(20px);transition:all .2s cubic-bezier(.8,.4,.3,1.25),background .15s ease;box-shadow:0 3px 8px rgba(#4F2EDC,.2)}
.spoiler input[type="checkbox"]:checked + .titleSpoiler .toggle span::before{transform:scale(1);opacity:0;transition:all .4s ease}
Style 2
/* Show Hide Spoiler Reboza Sambirejo Style 2 */
.spoilerRbz p{font-size:13px;margin:1.7em 0}
.spoilerRbz{border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0;padding:25px 15px;margin:30px 0;font-size:15px}
.spoilerTitle{display:flex;align-items:center;outline:0}
.spoilerTitle label{margin-left:auto;color:#fefefe;background-color:#4b7bec;border-radius:2px;padding:3px 15px;font-size:11px;font-weight:400;line-height:2.5em;cursor:pointer}
.spoilerTitle label::before{content:' Show all'}
.spoilerContent{max-height:0;overflow:hidden}
.spoilerInput:checked + .spoilerTitle label::before{content:' Hide all'}
.spoilerInput:checked ~ .spoilerContent{max-height:1000vh}
Style 3
/* Show Hide Spoiler Reboza Sambirejo Style 3 */
.spoilerRbz3{background-color:#fff;display:block;margin:10px 0;position:relative}
.spoilerRbz3 label{padding:12px 20px;width:100%;display:block;text-align:left;color:#3C454C;cursor:pointer;position:relative;z-index:2;transition:color 200ms ease-in;overflow:hidden;border:1px solid rgba(0,0,0,.1);border-left:0;border-right:0}
.spoilerRbz3 label::before{width:20px;height:10px;border-radius:50%;content:'';background-color:#5562eb;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale3d(1,1,1);transition:all 300ms cubic-bezier(0.4,0.0,0.2,1);opacity:0;z-index:-1}
.spoilerRbz3 label::after{width:32px;height:32px;content:'';border:2px solid #D1D7DC;background-color:#fff;background-image:url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.414 11L4 12.414l5.414 5.414L20.828 6.414 19.414 5l-10 10z' fill='%23fff' fill-rule='nonzero'/%3E%3C/svg%3E ");background-repeat:no-repeat;background-position:2px 3px;border-radius:50%;z-index:2;position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;transition:all 200ms ease-in}
.spoilerRbz3 input:checked ~ label{color:#fff;border:0}
.spoilerRbz3 input:checked ~ label::before{transform:translate(-50%,-50%) scale3d(56,56,1);opacity:1}
.spoilerRbz3 input:checked ~ label::after{background-color:#54E0C7;border-color:#54E0C7}
.spoilerRbz3 input{width:32px;height:32px;order:1;z-index:2;position:absolute;right:30px;top:50%;transform:translateY(-50%);cursor:pointer;visibility:hidden}
.isiKonten p{font-size:13px;margin:1.7em 0;text-align:justify}
.isiKonten{display:none;padding:10px 20px;background-color:#f6f6f6}
.spoilerRbz3 input:checked ~ .isiKonten{display:block}
Simpan template.
Kemudian untuk cara pemanggilan atau pemasangan show hide spoiler di blog silahkan pada saat menulis postingan masuk ke tampilan HTML terlebih dahulu.
Kode Pemanggil
Style 1
<div class="spoiler">
<input type="checkbox" id="cbx" class="hidden"/>
<div class="titleSpoiler">
<label for="cbx" class="toggle"><span></span></label>
<span>Show additional information</span>
</div>
<span class="isiSpoiler">
isi kontenmu disini.
</span>
</div>
Jika ingin menambahkan spoiler lebih dari 1 pada satu postingan yang sama, tambahkan angka setelah cbx. Contoh ada 2 spoiler, jika spoiler pertama menggunakan id="cbx" dan for="cbx", maka untuk spoiler ke-2 tambahkan angka setelahnya. Mmisal menjadi id="cbx1" dan for="cbx1".
Style 2
<div class="spoilerRbz">
<input id="spoiler-01" class="spoilerInput hidden" type="checkbox"/>
<div class="spoilerTitle">
<b>Spoiler</b>
<label for="spoiler-01"></label>
</div>
<div class="spoilerContent">
<p>
isi konten disini.
</p>
</div>
</div>
Jika lebih dari 1 spoiler dalam 1 postingan yang sama, ganti atau tambahkan angka pada kode yang kami tandai.
Style 3
<div class="spoilerRbz3">
<input id="option1" name="option1" type="checkbox"/>
<label for="option1"><b>Spoiler</b></label>
<div class="isiKonten">
<p>isi konten disini.
</p>
</div>
</div>
Jika lebih dari 1 spoiler dalam 1 postingan yang sama, ganti atau tambahkan angka pada kode yang kami tandai.
Posting dan lihat
Bagaimana? cukup mudah bukan?
Jika masih kesulitan bisa ditanyakan melalui kolom komentar.
