Cara Membuat Tombol Spoiler di Untuk Blog/Website dan Fungsinya

kali ini saya akan berbagi bagaimana cara membuat tombol spoiler atau tombol buka tutup (show/hide) di blog/website.

Tutorial cara membuat tombol spoiler di blog/website ini penting khususnya sobat newbie, agar tampilan blognya lebih menarik gitu.

Namun sebelum membahas lebih jauh tentang cara membuat tombol spoiler di blog/website. Sebaiknya kita pahami dulu pengertian “spoiler”. Mengingat istilah ini banyak bertebaran di media sosial.

Apa itu Spoiler?

Spoiler adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut [sumber WikiPedia]. Bahasa Indonesianya adalah “beberan/bocoran”.

Namun jika kita telusuri secara mendetail, kata “Spoiler” berasal dari bahasa Inggris yaitu “Spoil” yang artinya merusak atau mengganggu. Maka, Spoiler artinya perusak atau pengganggu.

Setelah mengetahui definisi “Spoiler”, mungkin bagi pembaca yang awam akan sedikit mengerutkan kening dan bertanya-tanya. Apa sih arti spoiler yang sebenarnya? (Beberan atau Perusak?)

Jadi gini, sebetulnya istilah “spoiler” ini memiliki makna yang beragam sih, tergantung dari sudut mana kita mengartikannya.

Pengertian spoiler dari segi media, silahkan tekan tombol spoiler di bawah ini!

Arti SPOILER dari segi Media :

Itu pengertian spoiler berasal dari faktor media, namun selagi luang kali ini saya dapat mengkaji perihal spoiler berasal dari sudut yang berbeda, yakni berasal dari faktor Informasi Teknologi atau lebih spesifik di dunia blogging/website.

Bicara perihal spoiler berasal dari faktor Informasi Teknologi, bukan bermakna menceritakan film yang telah kita tonton ke teman-teman (Oalah kagak danta!).

Dari faktor Informasi Teknologi, Spoiler adalah sebuah fitur di mana kita bisa menyimpan atau menyembunyikan beberapa konten di sebuah artikel.

Bisa dikatakan, tombol spoiler adalah sebuah tombol buka dan tutup (show & hide) yang bisa menyembunyikan suatu konten berupa teks, script, gambar atau video.

Konten dapat keluar kecuali pembaca artikel (user) meng-klik tombol spoiler tersebut. Sebaliknya, konten dapat tersembunyi kecuali pembaca artikel (user) meng-klik lagi tombol spoiler tersebut.

Itulah menariknya topik yang sedang kita obrolkan ini. Unik ya kan!

Berikut contoh tombol spoiler atau tombol buka tutup di blog/website. Artinya kala kita klik tombol “lihat spoiler”, maka teks dapat muncul.

Silahkan klik tombol spoiler di bawah ini!

FYI, Penggunaan spoiler pada awalnya dipopulerkan di situs forum seperti Kaskus, Indowebster, dan forum online yang menggunakan Vbulletin lainnya.

Di sana disediakan fitur yang bisa kita gunakan dengan hanya menekan tombol “Add Spoiler” yang tersedia pada menu panel posting.

Namun seiring dengan merambaknya kepopuleran dunia blogging, penggunaan spoiler juga seringkali diterapkan oleh pemilik blog/website di postingan artikel, termasuk saya.

Bagi sobat Kaskuser misalnya, pasti tidak asing lagi dengan yang namanya spoiler ini ya kan?

Saya sendiri terinspirasi dari fitur spoiler yang ada di Kaskus. Meskipun saya tak pernah membuat thread di sana (Kaskus), tapi saya merasa tertantang dengan fitur spoiler ini. Sepertinya layak untuk dicoba, keren.

And than.. saya pun tertarik untuk mengaplikasikannya di blog saya ini. SKIP!!

*Silahkan sembunyikan lagi konten dengan meng-klik ulang tombol spoiler.

Apa fungsi Spoiler?

Fungsi spoiler adalah :

✔️ Untuk menyembunyikan sebagian konten yang terlalu panjang/lebar agar terlihat rapi.

✔️ Untuk menghemat space artikel agar lebih praktis dan keren.

✔️ Untuk menghemat kuota pembaca.

✔️ Untuk mempercepat proses loading page, terutama konten yang bandwith killer (ukuran besar) seperti gambar atau video.

✔️ Untuk membagikan kejutan kepada pengunjung blog kita berupa teks, gambar, atau hal menarik lainya.

Nah yang jadi masalahnya, platform blog seperti Blogger dan Wordpress tidak menyediakan fitur spoiler seperti yang ada di Kaskus. Untuk bisa membuat tombol spoiler pada posting blog, harus digunakan kode-kode khusus, yang cukup panjang.

Jadi, gimana udah jago main kode-kodean? Baguslah!

Kalo sudah jago main kode-kodean sih, menariknya tombol spoiler ini bisa dimodifikasi dan dikreasikan sesuka hati agar postingan semakin menarik.

Untuk mendapatkan pemahaman yang lebih baik. Langsung saja yuk meluncur ke TKP!

Cara membuat tombol spoiler sederhana

Script :

<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%;">CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Sulistia-One</div><div id="hide"></div></div>

Preview

Cara membuat tombol spoiler berupa teks

Script :

<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/>CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Sulistia-One </span>

Hasilnya :

[Tampilkan Konten]

Cara membuat tombol spoiler tanpa judul

Script :

<div style="margin-bottom: 5px;"> <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'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 12px; margin: 0px; padding: 0px; width: 80px;" type="button" value="Munculkan" /></div> <div style="border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"> CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Sulistia-One </div> </div>

Penampakan

Cara membuat tombol spoiler dengan judul

Script :

<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;">CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Sulistia-One</div></div>

Tampilannya :

Judul Spoiler:

Cara membuat tombol spoiler berisi gambar

Script :

Hasil :

Cara membuat tombol spoiler berisi video

Script :

Penampakan :

Cara membuat spoiler dengan kotak bingkai (frame box)

Script :

<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;">CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Sulistia-One</span></span></div></div></div>

Preview :

Sumber : http://ricohaloho.blogspot.com/2021/03/cara-membuat-tombol-spoiler-di-blog.html?

Cara Membuat Tombol Spoiler di Untuk Blog/Website dan Fungsinya

Apa itu Spoiler?

Apa fungsi Spoiler?

0 Response to "Cara Membuat Tombol Spoiler di Untuk Blog/Website dan Fungsinya"

Posting Komentar