Minggu, 07 Maret 2021

Cara Membuat Tombol Spoiler di Blog/Website

Cara Membuat Tombol Spoiler di Blog/Website – Waktu luang 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.

So, bagi yang belum tahu silahkan disimak agar tidak keliru (yang sudah tahu, CMIIW ya!).

OK then, let's get started.. :)

Apa itu Spoiler?


Menurut [ Wikipedia ], Spoiler adalah tulisan atau keterangan mengenai suatu cerita, yang membeberkan jalan cerita tersebut. 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?)

Ehh, udah kayak pilihan berganda ya. Cuma kali ini jawabannya, semua benar! 😁

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 :

Kalo dari segi media, spoiler adalah sebutan untuk orang yang suka membocorkan jalan cerita dari sebuah film, buku, musik, atau serial televisi yang baru muncul dan banyak dinantikan publik. Ini yang disebut spoiler = perusak.

Misalnya, tanpa prolog kadang si tukang spoiler ini udah nyerocos bercerita tentang ending dari sebuah cerita (sebut saja drakor).

Malas juga sih lihat mahluk tipe kyak gitu. Jadi kurang seru, feel -nya jadi nggak dapat deh, karena udah diceritain duluan.

Makanya kalo kalian perhatikan di media sosial, wajar bila si tukang tebar spoiler ini sangat dibenci banyak orang. Mungkin juga kamu salah satunya yang dilabelin tukang spoiler. Ee! *mulai dah julit

But, wait! Jangan asal ngomong spoilar spoiler deh. Beda kasus kalo kamu yang nanya duluan. Itu sih namanya bukan spoiler, tapi KEPO. Plakk!! *dilempar pake bakiak 🤣

Nah sekarang sudah tahu kan, spoiler itu artinya apa? Ingat-ingat ya. Jangan sampai saban hari tiarap di media sosial, tapi ilmunya nggak ada. Masa arti spoiler saja nggak tahu. SKIP!!


Itu pengertian spoiler dari segi media, namun waktu luang kali ini saya akan membahas tentang spoiler dari sudut yang berbeda, yaitu dari segi Informasi Teknologi atau lebih spesifik di dunia blogging/website.

Bicara tentang spoiler dari segi Informasi Teknologi, bukan berarti menceritakan film yang udah kita tonton ke teman-teman (Oalah kagak danta!).

Dari segi Informasi Teknologi, Spoiler adalah sebuah fitur dimana kita bisa menyimpan atau menyembunyikan sebagian konten di sebuah artikel.

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

Konten akan muncul jika pembaca artikel (user) meng-klik tombol spoiler tersebut. Sebaliknya, konten akan tersembunyi jika pembaca artikel (user) meng-klik ulang 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 ketika kita klik tombol “lihat spoiler”, maka teks akan 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.
Lalu, mungkin akan timbul pertanyaan baru, apa sih gunanya spoiler? Ngapain sih harus pakai spoiler?

Baik, akan saya coba jawab.

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.

✔️ Atau bahkan spoiler bisa juga digunakan untuk menipu (jangan yah!). Misalnya, disebutkan Ariel dan Cut Tari lagi “anu”, eh.. pas di-klik ternyata Dinar Candy lagi ngegosip, misalnya ya misal. *Mau dong digosipin sama Dinar Candy 🤣

Banyak kan manfaat tombol spoiler di blog/website. Makanya kalo sekiranya artikel yang saya tulis sudah kepanjangan, artikelnya akan saya bonsai (diceperin), ya diakalin gitu dengan cara membuat tombol spoiler di Blog/Website.

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 – Rico Sihaloho</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 – Rico Sihaloho </span>

Preview :

[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 – Rico Sihaloho </div> </div>

Preview :

CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho

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 – Rico Sihaloho</div></div>

Preview :

Judul Spoiler:
CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho
Cara membuat tombol spoiler berisi gambar

Script :

<div style="margin: 5px;"> <div class="smallfont" style="margin-bottom: 2px;"><input style="margin: 0px; padding: 0px; width: 60px; font-size: 10px;" 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button" value="Show" /></div> <div class="alt2" style="border: 1px inset; margin: 0px; padding: 6px; background: #FAFAF7;"> <div style="display: none;"><img class="aligncenter" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRA2pPjm8aAct2pdL5wkQC4vEz-wHFQSuNynABh5EEsrosfcCAfUTINBDEUr0k20_YlbwR7E4hy6dAhz9BoDetGheX6-lzSSkNT6RUETjdLd0pAyTeakI5cYvjKwhfZtNn-lBa-fDBQKLu/s720/spoiler-gambar.jpg" alt="spoiler-gambar" width="410" height="300" /></div> </div> </div>

Preview :

cara-membuat-tombol-berisi-gambar

Cara membuat tombol spoiler berisi video

Script :

<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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div> <div class="alt2" style="background: rgb(250, 250, 247); border: 1px inset; margin: 0px; padding: 6px;"> <div style="display: none;"><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/CfhP30o-EJE" width="320" youtube-src-id="CfhP30o-EJE"></iframe></div></div> </div> </div></div>

Preview :


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 – Rico Sihaloho</span></span></div></div></div>

Preview :

CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho

Dan masih banyak lagi, silahkan berkreasi sendiri. Misalnya bagaimana cara membuat tombol spoiler berisi link. Klik tombol spoiler di bawah ini!


NEXT..

Bagaimana cara membuat tombol spoiler di blog/website?

Untuk membuat tombol spoiler atau tombol buka tutup (show/hide) di postingan Blog/Website. Silahkan kalian gunakan daftar listing code di atas dan pasang kode tersebut kedalam artikel blog kalian.

Edit tulisan "CARA MEMBUAT TOMBOL SPOILER ATAU TOMBOL BUKA TUTUP (SHOW/HIDE) DI BLOG/WEBSITE – Rico Sihaloho" yang ada pada script, dan ganti dengan konten kalian.

Ingat! Cara pemasangan kode ini kalian harus menyimpannya di bagian mode “HTML” bukan di “Compose” yah.

Oh iya, perlu dipertimbangkan ada beberapa kelemahan jika menggunakan spoiler ini. Silahkan klik tombol di bawah ini !
➤ Konten di dalam spoiler kemungkinan akan terlewatkan (tidak dibaca). Karena tidak semua pengunjung mengerti cara membuka spoiler (Warga +62 masih banyak yang gaptek cuyy!).
➤ Ada juga pengunjung yang takut kalau meng-klik spoiler, mungkin dikira link. Ini ada kaitannya sama si gaptek.
➤ Ada juga pengunjung malas buka spoiler. Ah you know lah, minat baca generasi micin! Jangankan meng-klik tombol spoiler, artikel penting sekalipun meski kita sodorkan ke depannya boro-boro mau baca. 😁
➤ Untuk spoiler ini, saya belum tahu pasti, apakah mesin pencari juga dapat mengindeks konten dalam spoiler atau tidak. Jadi bagi sobat yang tahu, silahkan komen di bawah.
➤ Dan lainnya (bisa sobat tambahkan dengan menulis di kolom komentar).

Sampai di sini dulu pembahasan tentang cara membuat tombol spoiler di Blog/Website. Kalo ada masukan, kritikan, unek-unek silahkan berkomentar yah!

Semoga tutorial cara membuat tombol spoiler ini bisa bermanfaat bagi siapapun yang ingin mempercantik blog-nya. Thanks!

See you on top..

Nite & GBU more. Bye..!!!
By Rico Sihaloho - Maret 07, 2021

1 komentar:

1. Relevan (Tidak Out of Topic).
2. Sopan, jangan meninggalkan komentar SPAM di blog saya.
3. Jangan menggunakan bahasa kasar atau SARA.
4. Berilah masukan yang membangun kecerdasan berpikir.
Terima kasih atas perhatiannya!

Langganan: Posting Komentar (Atom)
 
;