Magelang1337.com - Jika kamu adalah suka tongkrong di kaskus pasti sudah paham dengan yang namanya Spoiler. Tombol ini sering dipakai oleh kaskuser saat membuat thread disana. Cara Membuat Spoiler di Blog sebenarnya tidak sulit dan pada kesempatan kali ini kami ingin berbagi bagaimana cara membuatnya dengan mudah. Sebelumnya kita bahas dulu apa itu Spoiler.
Pengertian Tentang Spoiler
Spoiler di blog artinya bukan bercerita tentang jalan cerita film yang sudah kamu tonton kepada teman. Spoiler adalah sebuah tombol yang memiliki fungsi untuk menyembunyikan teks, gambar dan lainnya yang muncul jika tombol tersebut di klik pembaca. Tombol spoiler adalah tombol show dan hide yang kamu pada forum seperti Kaskus.
Apa kegunaan Spoiler untuk Artikel Blog
Spoiler ini sangat berguna jika kamu mempunyai artikel yang panjang jadi kamu bisa meringkasnya dengan tombol ini.
tidak cuma itu saja, spoiler juga berfungsi jika kamu memiliki blog film dan deskripsi file yang ingin kamu bagikan. Fungsinya untuk menyembunyikan deskripsi tersebut supaya rapi dan bisa muncul jika tombol spoiler di klik. Atau bisa juga jika kamu mau membagikan sebuah kejutan kepada pembaca blog seperti teks, gambar atau hal lainnya.
Cara Membuat Spoiler (Show/Hide) di Artikel Blog
Disini kami akan berbagi beberapa Cara Membuat Spoiler di Blog. Ada yang menggunakan CSS ada yang bisa langsung kamu pakai lewat HTML. Sebenarnya lebih simple kamu memakai CSS karena biasanya akan terlihat lebih baik dan rapi.
1. Membuat Spoiler di Blog (Button Tetap)
Untuk dapat memakai Spoiler yang pertama ini di artikel blog dengan posisi tombol tetap. Kamu langsung membuat artikel dan letakkan script dibawah di posisi yang di inginkan.
<div style="margin: 5px 20px 20px;">
<div class="smallfont" style="margin-bottom: 2px;"><b>Judul Spoiler</b>: <input value="Buka" style="margin: 0px; padding: 0px; width: 55px; font-size: 12px;" 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'; }" type="button">
</div>
<div class="alt2" style="border: 1px inset ; margin: 0px; padding: 6px;">
<div style="display: none;">
Isi Spoiler teks atau kode script (gambar atau video) di sini
<br>
</div>
</div>
</div>2. Membuat Spoiler di Artikel Blog (HTML)
Cara berikutnya sama seperti cara pertama, Namun perbedaannya adalah posisi berada di tengah atau center. Caranya kamu langsung saja membuat artikel dan pilih mode HTML letakkan kode berikut ini pada posisi yang tepat.
<center><div style="border: 1px inset black; padding: 1px;"><div id="spoiler"><div><input 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 = 'NAMA TOMBOL UNTUK DI HIDE'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'NAMA TOMBOL SHOW LAGI'; }" style="color: #ff6600; font-size: 11px; font-weight: bold; margin: 2px; padding: 0px;" type="button" value="NAMA TOMBOL SHOW SPOILER" /><div id="show" style="border: 1px solid white; display: none; margin: 2px; padding: 2px; width: 98%;"><span style="color: #ff6600; font-weight: bold;"><div style="border: 1px solid rgb(153, 153, 153); height: 300px; overflow: auto; text-align: center; width: 270px;"><div class="separator" style="clear: both;"><div class="separator" style="clear: both;">Letakkan teks atau kode script (gambar atau video) di sini</div></div></div></span></div></div><div id="hide"></div></div></div></center>3. Membuat Spoiler di Artikel Blog Show/Hide (CSS)
Selanjutnya membuat spoiler di blog dengan CSS jadi kamu harus menambahkan script dibawah ini ke template.
- Login Blogger
- Pilih Edit Template
- Cari kode head seperti ini </head> atau ]]></b:skin> lalu copy dan paste-kan style css berikut diatasnya dan klik Save.
/*spoiler full css by:www.magelang1337.com*/
.spoilerme{display:block;margin:10px;padding:0;}
.spoilerme .tombol{background:#04c5cc;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;}<div class="spoilerme">
<div class="tombol" tabindex="0">
</div>
<div class="isi">
<p>Tulis judulmu di sini</p>
<p>Isi spoilermu di sini.</p>
</div>
</div>4. Membuat Spoiler di Artikel Blog Keren Responsive
Terakhir kode spoiler menggunakan HTML menggunakan bantuan CSS sehingga tidak hanya sangan simple tetapi juga sangat responsive. Cara memasangnya:
- Login Blogger
- Buatlah sebuah artikel atau halaman
- Masukan kode dibawah ini sesuai dengan posisi tombol spoiler yang kamu inginkan.
<style>
/* Spoiler Box Pure CSS by Magelang1337.com */
.magelang1337Spoiler {
display:block; margin:10px 0px; border:1px solid #3498db; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.magelang1337Spoiler .tombol {
background:#50b1f2; /* 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;
}
.magelang1337Spoiler .tombol:focus {
pointer-events:none;
}
.magelang1337Spoiler .tombol:before {
content:'Lihat Spoiler'; /* Tulisan untuk membuka tombol */
display:inline-block; padding:7px 10px; border-radius:3px; -moz-border-radius:3px;
}
.magelang1337Spoiler .tombol:focus::before {
content:'Tutup Spoiler'; /* Tulisan untuk menutup tombol */
background:#cc0000; /* Warna tombol ketika spoiler terbuka */
}
.magelang1337Spoiler .isi {
background:#e4e4e4; /* Warna background isi spoiler */
pointer-events:auto; visibility:hidden; opacity:0; height:0px; transition:all .5s ease;
}
.magelang1337Spoiler .tombol:focus + .isi {
visibility:visible; opacity:1; height:auto; margin:10px 0px 5px; padding:10px 15px; transition:all .5s ease;
}
</style>
<div class="magelang1337Spoiler">
<div class="tombol" tabindex="0"></div>
<div class="isi">
<!-- Isi Spoiler -->
Tulis konten yang ingin disembunyikan disini.
</div>
</div>
Dan demikianlah beberapa kode Spoiler yang kamu bisa pasang di blog. Jika kamu ada pertanyaan tentang artikel Cara Membuat Spoiler di Blog silahkan komentar dibawah. Terima kasih