Cara Membuat Box Spoiler (Tombol Show Hide) Responsive dan Keren di Postingan Blog

komputerdia.com - Tombol spoiler atau sering dikenal juga dengan tombol tutup dan buka (show & hide) yang merupakan suatu fitur dimana kalian bisa menyimpan atau menyembunyikan suatu konten tulisan ataupun gambar. Namun jika kita artikan secara mendetail Spoiler 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 itu, pembaca juga dapat menyembunyikan kembali posting tersebut dengan menekan ulang tombol tersebut. Sementara fungsi spoiler itu sendiri adalah untuk menghemat space posting, mempercepat loading halaman, menghemat kuota pembaca, dan menyembunyikan isi konten artikel yang kalian buat kedalam suatu box dan jika pengunjung blog kalian menekan tombol spoiler tersebut, maka secara otomatis konten didalam box tersebut akan terbuka.

Selain penjelasan diatas, ada juga yang mendefinisikan, bahwa pengertian Spoiler Spoiler merupakan sebuah fitur yang terdapat pada suatu website/blog dan difungsikan untuk menyembunyikan barisan text panjang, gambar dengan resolusi besar, video, atau widget serta pembaca dapat melihat konten tersebut dengan melakukan klik sebuah tombol.

Penggunaan Spoiler pada awalnya dipopulerkan di situs forum seperti kaskus, indowebster, dan forum lainnya untuk menyembunyikan tulisan atau gambar yang terlalu panjang. Namun seiring dengan merambaknya kepopuleran dunia blogging penggunaan Spoiler juga seringkali diterapkan di postingan artikel blog atau website.

Masih berhubungan dengan materi spoiler, dibawah ini saya akan menjelasakan +12 cara bagaimana membuat tombol spoiler yang bisa kalian gunakan didalam postingan artikel blogkalian.

Membuat Tombol Spoler di Postingan Blog

Untuk membuat tombol show hide atau tombol spoiler silahkan kalian gunakan daftar kode dibawah ini dan pasang kode tersebut kedalam artikel blog kalian. Cara pemasangan kode ini kalian harus mentimpannya di bagian mode HTML bukan di Compose

1. Spoiler Simpel Default Blogger

Tombol spoiler pertama ini merupakan tombol spoiler yang sangat sederhana yang pada umumnya banyak sekali digunakan oleh para blogger. Untuk menggunakan spoiler ini silahkan kalian gunakan kode dibawah ini

 <div id="spoiler">
<div><input style="font-size: 11px; margin: 5px; padding: 0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Sembunyikan'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Tampilkan Konten'; }" name="button" type="button" value="Tampilkan Konten" /></div>
<div id="show" style="border: 1px solid white; display: none; margin: 5px; padding: 2px; width: 98%;">

Masukkan Tulisan kalian disini

</div><div id="hide"></div></div>

Maka hasilnya akan telihat seperti dibawah ini

Masukkan tulisan kalian disini

2. Spoiler Teks Style Blogger

Gaya spoiler kedua ini merupakan spoiler yang tidak menggunakan tombol, namun pada spoiler ini hanya menggunakan teks saja sebagai pengganti tombol. Untuk menggunakan spoiler ini, silahkan kalian copy kode dibawah ini

 <a id="show_id" onclick="document.getElementById('spoiler_id').style.display=''; document.getElementById('show_id').style.display='none';"><b>[Tampilkan Konten]</b></a><span id="spoiler_id" style="display: none;"><a class="link" onclick="document.getElementById('spoiler_id').style.display='none'; document.getElementById('show_id').style.display='';"><b>[Sembunyikan Konten]</b></a><br /> <br/>

Masukkan tulisan kalian disini

</span> 

Maka hasilnya akan terlihat seperti dibawah ini
[Tampilkan Konten][Sembunyikan Konten]

Masukkan tulisan kalian disini

3.Spoiler Border Color Blogger

Spoiler gaya ketiga ini merupakan spoiler yang sudah dimodifikasi dengan menggunakan border, Untuk menggunakan spoiler yang satu ini silahkan kalian copy kode dibawah ini

<div style="text-align: left;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="-moz-border-radius: 2px; -webkit-border-radius: 2px; background-color:  #FFF8DC; border-radius: 2px; border: 3px solid #00008B; color: black; width: 250px;" type="button" value="Tampikan Konten" /></div>
<div style="padding:10px; text-align: justify;">
<div style="display: none;"> 

Masukkan konten kalian disini

</div>
</div>

Maka hasilnya akan terlihat seperti dibawah ini

Masukkan konten kalian disini

4. Spoiler Frame Box Blogger

Tombol spoiler gaya keempat ini merupakan spoiler yang sudah dilengkapi dengan sebuah frame yang terlihat, namun untuk konten tidak akan terlihat sebelum tombol spoiler tersebut di klik. Untuk kalian yang akan menggunakan gaya spoiler ini, silahkan kalian copy code dibawah ini

 <div style="margin-bottom: 2px;"><div style="margin-top: 5px; text-align: left;"><input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup Konten'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan Konten'; }" style="font-size: 15px; margin-top: 5px; width: 150px;" type="button" value="Tampilkan Konten" /> </div><div style="background-color: no; border-bottom: 2px solid #00008B; border-left: 20px solid  #00008B; border-right: 2px solid #00008B; border-top: 2px solid #00008B; margin: 0px; padding: 6px;"><div style="display: none;">
<span style="color: black; font-style: regular;"><span style="color: black; font-family: Verdana, sans-serif;">

Simpan Konten Artikel Kalian Disini

</span></span></div></div></div> 

Maka hasilnya akan terlihat seperti dibawah ini

Simpan Konten Artikel Kalian Disini

5. Spoiler Blogger Dengan Judul

Spoiler yang kelima ini adalah spoiler yang sudah dilengkapi dengan teks atau judul di samping tombolnya, jenis spoiler ini juga sudah banyak digunakan di berbagai forum besar seperti kaskus. Untuk kalian yang akan menggunakan spoiler ini silahkan copy kode dibawah ini

 <div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>komputerdia.com</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /></div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;"> 

Letakkan konten kalian disini 

</div>
</div> 

Maka hasilnya akan terlihat seperti dibawah ini

komputerdia.com:

Letakkan konten kalian disini

6. Spoiler Blogger Gambar

Spoiler yang ke enam ini merupakan spoiler yang bisa kalian gunakan untuk menyisipkan teks dan gambar, untuk kalian yang akan menggunakan spoiler ini silahkan copy kode dibawah ini

 <div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 55px;" type="button" value="Buka" /> </div>
<div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mKPcqsuUA4s5_dc3aKaORm4k4fyzBYjSi5XaR04pSWZU4yZUHqc7HDVVdAAyJQ8CBoZqw3CWmPri2nr7Mg-3ZVgPWhtalgkT7GUnDPqFBbLTT2ySOLWZBKG14Ut3JlzpFxTZDaHbtp7z/s1600/Membuat-Tombol-Tutup-Buka-%2528spoiler%2529-Di-Postingan-Blog.png" imageanchor="1">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh7mKPcqsuUA4s5_dc3aKaORm4k4fyzBYjSi5XaR04pSWZU4yZUHqc7HDVVdAAyJQ8CBoZqw3CWmPri2nr7Mg-3ZVgPWhtalgkT7GUnDPqFBbLTT2ySOLWZBKG14Ut3JlzpFxTZDaHbtp7z/s1600/Membuat-Tombol-Tutup-Buka-%2528spoiler%2529-Di-Postingan-Blog.png" /></a>
<img border="0" /></div>
</div>
</div> 

Maka hasilnya akan terlihat seperti dibawah ini

Judul Spoiler:

7. Spoiler Blogger Dengan Warna

Spoiler yang selanjutnya adalah spoiler yang sudah menggunakan warna baik pada bagian border maupun pada bagian background frame nya. Untuk kalian yang akan menggunakan spoiler yang satu ini silahkan kalian copy kode dibawah ini

 <div style="margin: 5px;">
<div class="smallfont" style="margin-bottom: 2px;">
<input onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerText = ''; this.value = 'Sembunyikan Konten'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'BUKA'; }" style="background: none repeat scroll 0% 0% yellow; border: 1px dashed red; color: blue; font-size: 10px; margin: 0px; padding: 5px; width: auto;" type="button" value="Tampilkan Konten" /></div>
<div class="alt2">
<div style="display: none;">
<div style="background-color: yellow; border: 2px dashed red; color: blue; padding: 10px; text-align: justify;">
Text, URL Gambar, Video atau Widget kalian Disni</div>
</div>
</div>
</div>

Maka hasilnya akan terlihat seperti dibawah ini

Text, URL Gambar, Video atau Widget anda Disni

8. Spoiler Keren Blogger dengan CSS

Untuk tampilan spoiler selanjutnya, sudah bisa dikatakan spoiler blogger yang mempunyai tampilan yang sangat menarik, karena pembuatan spoiler ini sudah menggunakan bantuan dari css. Untuk menggunakan spoiler ini silahkan kalian copy kode dibawah ini

 <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">
        <!-- Isi Spoiler -->
        Tulis konten yang ingin disembunyikan disini.
    </div>
</div> 

Maka hasilnya akan terlihat seperti dibawah ini

Tulis konten yang ingin disembunyikan disini.

9. Spoiler Keren Responsive Blogger

Spoiler selanjutnya adalah spoiler yang menurut saya ini merupakan desain spoiler yang sangat menarik karena sudah menggunakan warna gradient pada tombolnya dan spoiler ini juga sudah di lengkapi dengan fitur responsive. Untuk kalian yang akan menggunakan spoiler ini silahkan copy kode dibawah ini

Langkah pertama silahkan kalian tempatkan kode dibawah ini tepat diatas kode </body> pada menu edit Html

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

Setelah kode tersebut disimpan diatas kode </body>, slahkan kalian tekan tombol simpan tema langkah terakhir silahkan kalian copy kode dibawah ini dan letakkan di postingan kalian

 <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}
<script>
$(document).ready(function(){$("#flippy").click(function(){$("#flippanel").slideToggle("normal")})});
</script>
</style>
<div id="flippy"><button>Tampilkan Konten</button></div><div id="flippanel"> Masukkan Gambar, Teks, Video di sini
</div> 

Maka hasilnya akan terlihat seperti dibawah ini

Masukkan Gambar, Teks, Video di sini

10. Spoiler Blogger Responsive CSS

Spoiler kesepuluh hampir sama dengan spoiler pada nomor sembilan, dimana spoiler ini juga dibangun menggunakan bantuan dari CSS dan spoiler ini juga dapat menampilkan hasil yang sangat bagus dan responsive. Untuk kalian yang akan menggunakan spoiler ini silahkan kalian copy kode dibawah ini

Langkah pertama silahkan kalian tempatkan kode dibawah ini tepat diatas kode </body> pada menu edit Html

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

Setelah kode tersebut disimpan diatas kode </body>, slahkan kalian tekan tombol simpan tema langkah terakhir silahkan kalian copy kode dibawah ini dan letakkan di postingan kalian

 <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}
<script>
$(function(){
 $(".pedomane").on("click", function(){
 $(this).parent().children(".pedomanepanel").slideToggle("normal");
 });
});
</script>
</style>
<div class="centerpedomane"><button class="pedomane">Tampilkan Konten</button>
<div class="pedomanepanel">
Letakkan konten kalian disini
</div>
</div> 

Maka hasilnya akan terlihat seperti dibawah ini

Letakkan konten kalian disini

Kelebihan Spoiler di Blog

• Menghemat space (tinggi, panjang, dan lebar) posting
• Mempercepat loading halaman blog
• Menghemat kuota pembaca.
• Bisa untuk menyembunyikan keyword tertentu untuk optimalisasi posting (tidak dianjurkan)
• Menyembunyikan konten teks, gambar dan lainnya sesuai dengan kebutuhan

Kekurangan Spoiler di Blog

• Bagi pengunjung baru atau pengunjung awam penggunaan spoiler ini akan cukup membuat mereka bingung
• Untuk spoiler ini, saya belum tahu pasti, apakah mesin pencari juga dapat mengindeks isi spoiler atau tidak, namun banyak para mastah yang berargumen jika isi konten dalam spoiler ini juga dapat dirayapi atau di indeks dengan baik oleh mesin pencari

Share this post