Cara Membuat Spoiler Box (Show Hide) Keren dan Responsive di Blogger Dengan CSS

komputerdia.com - Spoiler Box atau sering dikenal juga dengan tombol show hide merupakan salah satu fitur yang terdapat didalam website atau blog dimana dengan menggunakan spoiler box ini kalian bisa menyimpan atau menyembunyikan suatu konten tulisan ataupun gambar pada kotak box tersebut. Namun jika kita artikan secara mendetail Spoiler Box merupakan suatu wadah atau bagian pada suatu artikel yang akan di isi dengan posting konten (teks, foto atau video) tersembunyi dan konten tersebut dapat dilihat jika pengunjung artikel tersebut melakukan klik pada tombol.

Selain dapat mengakses fitur diatas, pembaca juga dapat menyembunyikan kembali posting tersebut dengan menekan ulang tombol tersebut. Sementara fungsi spoiler box itu sendiri adalah untuk menghemat space postingan, mempercepat loading halaman artikel pada blog, menghemat kuota pembaca, serta untuk menyembunyikan isi konten artikel yang kalian buat kedalam box dan jika pengunjung blog kalian menekan tombol spoiler tersebut, maka secara otomatis konten didalam box tersebut akan terbuka.

Cara Membuat Spoiler Box di Postingan Blog

Pada dasarnya cara untuk membuat box spoiler (tombol show hide) di postingan blogger kita hanya cukup menempatkan suatu kode kedalam postingan yang sedang dibuat. Untuk memahami secara lanjut bagaimana cara memasang spoiler box di blog silahkan kalian ikuti langkah-langkah dibawah ini

• Langkah pertama silahkan kalian masuk ke akun blogger 
• Selanjutnya kalian akan diarahkan ke halaman dashboard dan silahkan klik tombol Entri baru

• Setelah itu kalian akan diarahkan ke halaman pembuatan post, untuk menempatkan kode spoiler box, kalian gunakan mode HTML bukan di mode compose

• Jika semua pembuatan posting sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya
• Untuk desain spoiler boxnya sendiri, silahkan kalian pilih dibawah ini

1. Spoiler Box Blogger Responsive CSS

Desain spoiler pertama ini merupakan desain spoiler responsive yang dilengkapi dengan tombol.  Spoiler ini sudah cukup banyak digunakan oleh para blogger professional. Untuk menggunakan spoiler ini silahkan kalian copy kode dibawah ini

• Langkah pertama sebelum kalian menyimpan kode utama di postingan blog, terlebih dahulu kalian simpan kode dibawah ini tepat diatas kode </body> pada menu Tema → edit html

 <script>
$(function(){
 $(".pedomane").on("click", function(){
 $(this).parent().children(".pedomanepanel").slideToggle("normal");
 });
});
</script>

• Setelah itu silahkan kalian tekan tombol simpan tema 
• Lagkah selanjutnya silahkan kalian copy kode dibawah ini kedalam postingan yang akan di tanamkan spoiler box

 <style>
.centerpedomane {text-align: center}
.pedomane {text-align: center}
button.pedomane {background: #aa65c7; color: #fff; text-align: center; margin: 0 auto; border: none; border-radius: 3px; padding: 8px 16px; margin: 10px auto; font-size: 14px; font-weight: bold; box-shadow: 0 3px 0 0 #883da7; vertical-align: middle; cursor: pointer; text-shadow: 0 1px rgba(0,0,0,0.3); transition: background 0.1s ease-in-out}
.pedomane button:hover, .pedomane button:focus {background: #9e4fbf; outline: none}
.pedomanepanel {padding: 1px; text-align: left; background: #f5f5f5; border: 0}
.pedomanepanel {padding: 24px; display: none}
</style>
<div class="centerpedomane"><button class="pedomane">Bukain</button>
<div class="pedomanepanel">
Letakkan konten kalian disini
</div>
</div> 

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya

2. Spoiler Box Blogger Responsive

Spoiler box kedua ini merupakan spoiler box responsive yang digunakan oleh igniel, desain spoiler ini terbilang cukup elegan dan sangat enteng ketika digunakan. Untuk kalian yang akan menggunakan desain spoiler ini silahkan gunakan kode dibawah ini

• Silahkan kalian copy kode dibawah ini dan sisipkan kedalam postingan yang sedang kalian buat

 <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;
}
</style>
<div class="ignielSpoiler">
    <div class="tombol" tabindex="0"></div>
    <div class="isi">
        Letakkan konten kalian disini
    </div>
</div>

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya

3. Spoiler Box Blogger Gradient Color

Spoiler yang ketiga ini merupakan spoiler responsive yang desainnya sudah menggunakan perpaduan warna atau gradient color, sehingga tampilan spoiler ini akan terlihat sangat menarik dan keren jika kita pasang di dalam postingan blog. Untuk membuat spoiler ini silahkan kalian ikuti cara dibawah ini

• Langkah pertama silahkan kalian cari kode </body> pada menu edit html, kemudian simpan kode dibawah ini tepat diatas kode </body>

 <script>
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
</script> 

• Setelah itu silahkan kalian tekan tombol simpan tema
• Langkah selanjutnya kalian copy kode dibawah ini dan sisipkan pada bagian artikel yang akan dipasang spoiler box

 <style>
/* Animation */
@keyframes Gradient{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
#flippy{text-align:center;margin:auto;display:inline}#flippy button{background:#fff;background-image:linear-gradient(to right,#34ea78 0%,#2da7e3 51%,#34ea78 100%);background-size:200% auto;color:#fff;display:block;width:100%;padding:15px;font-weight:700;font-size:14px;text-align:center;text-transform:uppercase;letter-spacing:0.5px;margin:10px auto;border-radius:3px;box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);transition:all .3s}#flippy button:hover,#flippy button:focus{background-position: right center;outline:none;opacity:1;color:#fff}#flippanel{display:none;padding:10px 0;text-align:left;background:#fff;margin:10px 0 0 0}#flippanel img{background:#f5f5f5;margin:10px auto}
</style>
<div id="flippy"><button>Tampilkan Konten</button></div>
<div id="flippanel">Letakkan konten kalian disini</div>

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya

4. Spoiler Box Blogger Load

Desain spoiler ini merupakan desain spoiler elegan dengan cara kerja otomatis, dimana ketika kalian mengarahkan pointer ke arah box, maka konten yang berada didalam box tersebut akan terlihat. Untuk menggunakan spoiler ini silahkan kalian copy kode dibawah ini

• Silahkan kalian sisipkan kode dibawah ini kedalam postingan artikel yang sedang kalian buat

 <style>
blockquote.collapsed {
  font:italic normal 14px/1.4 Georgia,Serif;
  margin:0 0 0 66.5px;
  height:0;
  border:13px solid #93c47d;
  border-left-color:#073763;
  overflow:auto;
  -webkit-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  -moz-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  -ms-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  -o-transition:all 1.5s cubic-bezier(5,1,1,5) .1s;
  transition:all 1.5s cubic-bezier(5,1,1,5) .1s;}

blockquote.collapsed:content {content:"open"}
blockquote.collapsed:hover {
  padding:17px;
  background-color:#d0e0e3;
  border:2px solid #073763;
  height:250px;
  width:auto;
  -webkit-transition:all 3s;
  -moz-transition:all 3s;
  -ms-transition:all 3s;
  -o-transition:all 3s;
  transition:all 3s;}

#var-text {
  background: #073763;
  color: white;
  font-weight: bold;
  margin:0em 85% -1.6em 0;
  padding: 1.8px;
  width: 64px;
  text-align:center;}
</style>

<div id="var-text">
OPEN</div>
<blockquote class="collapsed">
Letakkan konten kalian disini
</blockquote>
<div style="clear: both;">
</div>

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya

5. Spoiler Box Blogger Dark Blue

Spoiler box kelima ini merupakan spoiler box yang hampir mirip dengan spoiler box nomor satu, spoiler ini telah dilengkapi dengan fitur responsive. Untuk kalian yang akan menggunakan spoiler ini silahkan gunakan kode dibawah ini

• Silahkan kalian sisipkan kode dibawah ini kedalam postingan artikel yang sedang kalian buat

 <style type="text/css">
/* animated spoiler CSS by komputerdia.com */
.imdspoilerbtn {
    display:block;
    margin:5px 0;
    background: #00008B;
    color: #fff;
    text-align: center;
    margin: 0 auto;
    border: none;
    border-radius: 3px;
    padding: 8px 16px;
    margin: 10px auto;
    font-size: 14px;
    font-weight: bold;
    box-shadow: 0px 3px 0px 0px #883da7;
    vertical-align: middle;
    cursor: pointer;
    text-shadow: 0 1px rgba(0, 0, 0, 0.3);
}
.imdspoiler {overflow:hidden;background: #eef0f2;}
.imdspoiler > div {-webkit-transition: all 0.2s ease;-moz-transition: margin 0.2s ease;-o-transition: all 0.2s ease;transition: margin 0.2s ease;}
.imdspoilerbtn[value="Reveal Hidden Contents"] + .imdspoiler > div {margin-top:-100%;}
.imdspoilerbtn[value="Hide Contents"] + .imdspoiler {padding:5px;}
</style>
<input class="imdspoilerbtn" type="button" value="Reveal Hidden Contents" onclick="this.value=this.value=='Reveal Hidden Contents'?'Hide Contents':'Reveal Hidden Contents';">
<div class="imdspoiler"><div>
<div style="text-align: justify;">

Letakkan konten kalian disini

</div></div>

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya

6. Spoiler Box Blogger List

Spoiler box yang ke enam ini sangat cocok kalian gunakan untuk menyembunyikan beberapa konten  hide yang berbeda, sehingga akan terlihat seperti pada contoh demo. Jika kalian akan menggunakan spoiler ini, silahkan ikuti langkah pemasangan dibawah ini

• Silahkan kalian sisipkan kode dibawah ini kedalam postingan artikel yang sedang kalian buat

 <style>
.tab {position: relative; margin-bottom: 1px; width: 100%; color: #fff; overflow: hidden } input{position: absolute; opacity: 0; z-index: -1; } label {position: relative; display: block; padding: 0 0 0 1em; background: #8fb59e; font-weight: bold; line-height: 3; cursor: pointer;} .tab-content {max-height: 0; overflow: hidden; color:#000; background: #fff; -webkit-transition: max-height .35s -o-transition: max-height .35s; transition: max-height .35s;} .tab-content p {margin: 1em;} /* :checked */ input:checked ~ .tab-content { max-height: 10em;} /* Icon */ label::after { position: absolute; right: 0; top: 0; display: block; width: 3em; height: 3em;line-height: 3; text-align: center; -webkit-transition: all .35s; -o-transition: all .35s; transition: all .35s;} input[type=checkbox] + label::after { content: "+";} input[type=radio] + label::after { content: "\25BC";} input[type=checkbox]:checked + label::after {transform: rotate(315deg);} input[type=radio]:checked + label::after { transform: rotateX(180deg) }
</style>
<div class="tab">
     <input id="tab-one" type="checkbox" name="tabs">
      <label for="tab-one">Tampilkan Konten 1</label>
      <div class="tab-content">
        <p>Letakkan konten kalian disini</p>
      </div>
    </div>

    <div class="tab">
      <input id="tab-two" type="checkbox" name="tabs">
      <label for="tab-two">Tampilkan Konten 2</label>
      <div class="tab-content">
        <p>Letakkan konten kalian disini</p>
      </div>
    </div>

    <div class="tab">
      <input id="tab-three" type="checkbox" name="tabs">
      <label for="tab-three">Tampilkan Konten 3</label>
      <div class="tab-content">
        <p>Letakkan konten kalian disini</p>
      </div>
    </div>

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya

7. Spoiler Blogger Lazy CSS

Spoiler box terakhir ini merupakan spoiler yang sangat ringan, karena spoiler ini telah dioptimalkan dengan lazy script. Untuk kalian yang akan menggunakan spoiler ini silahkan ikuti langkah dibawah ini

• Silahkan kalian sisipkan kode dibawah ini kedalam postingan artikel yang sedang kalian buat

 <style>
/************************************* 
Spoiler Content Box 
 # By komputerdia
 # komputerdia.com
*************************************/
.spoiler { position: relative; border: 2px dotted rgba(0,0,0,0.1); padding: 10px; background-color: #ffe496; margin: 10px 0; } .spoiler { color: #ffe496;  color: transparent; -webkit-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; } .spoiler:hover , .spoiler:active , .spoiler:focus  { color: inherit; } .spoiler::after { content: "{Arahkan pointer disini, untuk melihat konten}"; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #ffe496; text-align: center; font-size: 0.8em; padding: 10px; color: rgba(0,0,0,0.6); font-weight: 600; opacity: 1; -webkit-transition: 0.4s all ease-in-out; -moz-transition: 0.4s all ease-in-out; -ms-transition: 0.4s all ease-in-out; transition: 0.4s all ease-in-out; } .spoiler:hover::after, .spoiler:active::after, .spoiler:focus::after{ opacity: 0; }
 /* Colors */
.spoiler.green { background-color: #c8fbb8;} .spoiler.green::after { background-color: #c8fbb8;} .spoiler.blue { background-color: #bfe1ff;} .spoiler.blue::after { background-color: #bfe1ff;} .spoiler.red { background-color: #ffbfbf;} .spoiler.red::after { background-color: #ffbfbf;} .spoiler.purple { background-color: #e4bfff;} .spoiler.purple::after { background-color: #e4bfff;} .spoiler.black { background-color: #222; color: #fff;} .spoiler.black::after { background-color: #222; color: #fff;} .spoiler.white { background-color: #fff; color: #222; border-color: rgba(0,0,0,0.8); } .spoiler.white::after { background-color: #fff; color: #222; }
</style>
<div class="spoiler">
Letakkan konten kalian disini.
</div>

• Setelah pembuatan posting artikel sudah selesai, silahkan kalian publikasikan postingan tersebut dan lihat hasilnya 

Share this post