Cara membuat spoiler tutup buka keren di artikel blog

Tombol spoiler atau tombol tutup buka pada postingan sudah sering kita jumpai, namun apa sebenarnya manfaat dari memasang tombol spoiler tersebut. Jawabannya adalah untuk menyisipkan bagian artikel yang bisa dibilang penting atau tidak penting tergantung pada minat si pengunjung.

Misalnya penulis membuat sebuah artikel tutorial atau apapun ituh yang menyertakan beberapa gambar/video pada postingan nya. Terkadang pengunjung ada yang lebih menikmati tulisan dan membacanya saja tanpa melihat gambar yang menurutnya tidak penting ada juga pengunjung yang membutuhkan sebuah artikel yang di sertai dengan gambar.

Nah disinilah manfaat spoiler atau tombol tutup buka yang akan kita bahas kali ini. Jadi disaat pengunjung hanya ingin membaca artikel saja tanpa gambar/video kita dapat menyembunyikan nya dengan tombol spoiler ini begitu juga saat ada pengunjung yang ingin membaca artikel dengan gambar, pengunjung tinggal menekan tombol tersebut untuk melihatnya.

Keuntungan lain menambahkan spoiler pada postingan diantaranya membuat ruang menjadi minimalis sehingga postingan terlihat lebih rapih. Keuntungan lain menambahkan spoiler pada postingan diantaranya membuat ruang menjadi minimalis sehingga postingan terlihat lebih rapih. Disini saya akan memberikan beberapa contoh spoiler yang bisa kalian coba terapkan pada postingan kalian.

1. Sederhana

doble click to select

<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>

Hasilnya akan seperti berikut:

Masukkan Tulisan kalian disini

2. Hanya Teks

doble click to select

<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> Masukkan tulisan kalian disini </span>

Hasilnya akan seperti berikut:
[Tampilkan Konten][Sembunyikan Konten]

Masukkan tulisan kalian disini


3. Spoiler boks responsif

doble click to select

<style>.spoiler{background:#AEC7D6 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjprOtuygbbut9iRPKZ8wucjQwSE4a_J23bDghOpsCBeOyMfOzGhYbZ35m6mXfUvArDt8dcixpAKpIn_KNRDYb0BUHEkML2PebqlcR6DyOQ2cJWP4m8OvDNo0GyQn3g-n8ST76o1fuINMs/s1600/line_back.png) repeat-x;border:1px solid #ddd;padding:3px}.spoirel{font-family:Roboto Slab;font-size:12px;color:#555;margin-bottom:0;font-weight:bold;text-align:left;margin:1px;} </style> <div class="spoiler"><div class="spoirel">Judul Widget Anda<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 = 'TUTUP'; this.value = 'tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = 'buka'; this.value = 'buka'; }" style="color: saddlebrown; float: right; font-family: arial; font-size: 10px; font-weight: bold; margin: 2px; text-transform: uppercase;" type="button" value="LIHAT" /></div><div style="border: 0px inset #fff; color: blue; margin: 0 10px 0px 10px; padding: 0px; text-align: center;"><div style="display: none;"> Masukan Kode Widget Anda </div></div></div>

Hasilnya akan seperti berikut :

Judul Widget Anda

Masukan Kode Widget Anda

4. Menggunakan Frame/Border

doble click to select

<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>

Hasilnya akan seperti berikut :

Simpan Konten Artikel Kalian Disini

5. Spoiler + judul

doble click to select

<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;"> Letakkan konten kalian disini </div></div></div>

Hasilnya akan seperti berikut :

DARKCLOUD:

Letakkan konten kalian disini

6. Spoiler keren dengan CSS

doble click to select

<style>.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>

Hasilnya akan seperti berikut :

Tulis konten yang ingin disembunyikan disini.

7. Spoiler blogger responsif

doble click to select

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

Hasilnya akan seperti berikut :

Masukkan Gambar, Teks, Video di sini

8. Dengan CSS / JavaScript

HTML / doble click to select

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

Hasilnya akan seperti berikut :

Letakkan konten kalian disini

Itulah tadi beberapa contoh box spoiler yang bisa kalian terapkan pada postingan kalian. Pilih salah satu sesuai kebutuhan dan minat kalian.
Terimakasih telah berkunjung, semoga postingan ini bermanfaat bagi kalian. Terimakasih.