Home / WordPress / Cara Membuat Spoiler Di WordPress Dengan Mudah

Cara Membuat Spoiler Di WordPress Dengan Mudah

Cara Membuat Spoiler Di WordPress Dengan Mudah – Bingung bagaimana cara membuat spoiler di blog? Apa yang dimaksud dengan spoiler? Apakah sulit atau tidak cara membuat spoiler itu? Kode yang bagaimana untuk membuat spoiler? Ok dari keempat pertanyaan itu akan saya jawab pada tulisan kali ini. Atau jika Anda sedang mencari-cari cara tersebut, maka tidak salah lagi bahwa disini saya akan membahas bagaimana cara membuat spoiler di WordPress lengkap dengan contohnya. Sehingga spoiler yang dibuat bisa dengan mudah untuk dipahami dan langsung diterapkan di WordPress. Dan tentunya WordPress self hosted yang bisa mempraktekkan cara ini, untuk WordPress.com ma’af tidak bisa.

Baca Juga : Cara Menonaktifkan Link Di Kotak Komentar WordPress

Apa yang dimaksud dengan spoiler? Mungkin sebagian pengunjung masih belum paham tentang spoiler. Spoiler adalah sekumpulan kode yang digunakan untuk menyembunyikan konten. Konten disini seperti tulisan, gambar, dan video. Spoiler dilengkapi dengan tombol untuk membuka dan menyembunyikan lagi konten. Secara otomatis konten yang disisipkan dalam kode spoiler akan tersembunyi dan begitu diklik tombolnya maka sisipan konten tersebut akan terlihat atau terbuka jelas.

Cara-Membuat-Spoiler-Di-WordPress-Dengan-Mudah

Kenapa harus menggunakan spoiler? Atau kenapa sebuah konten harus disembunyikan? Tujuan utamanya adalah untuk mempercepat kinerja loading WordPress. Artinya jika sebuah halaman kinerjanya cepat diakses, maka space bandwith hostingpun akan hemat. Tentunya ini akan menguntungkan bagi kita yang mempunyai space hosting kecil perbulannya.

Berikut Cara Membuat Spoiler Di WordPress

Dalam membuat spoiler di WordPress, tempatkan kode di mode Teks/HTML jika ingin ditempatkan pada postingan atau halaman. Namun jika kita ingin menempatkan spoiler di widget atau sidebar, tinggal tempat kode di Widget Teks.

Cara Pertama Membuat Spoiler di WordPress

Berikut adalah kodenya untuk contoh spoiler pertama :

<div id="spoiler">
<div><input style="font-size: 14px; margin-bottom: 10px; padding: 3px; cursor: pointer;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'View Again'; }" name="button" type="button" value="CONTOH SPOILER PERTAMA, KLIK UNTUK MELIHAT!" /></div>
<div id="show" style="display: none;">
<div style="color: #000000; background: none repeat scroll 0% 0% #ffe6a1; border: 1px solid #feb900; padding: 7px;">
<p style="text-align: justify; margin-bottom: 0px;">Spoiler adalah sekumpulan kode yang digunakan untuk menyembunyikan konten. Konten disini seperti tulisan, gambar, dan video. Spoiler dilengkapi dengan tombol untuk membuka dan menyembunyikan lagi konten. Secara otomatis konten yang disisipkan dalam kode spoiler akan tersembunyi dan begitu diklik tombolnya maka sisipan konten tersebut akan terlihat atau terbuka jelas.</p>
</div><div id="hide"></div></div></div>

Ganti kalimat yang berwarna merah sesuai dengan kebutuhan masing-masing.

Cara Kedua Membuat Spoiler di WordPress

Berikut adalah kodenya untuk contoh spoiler kedua :

<div id="spoiler">
<div><input style="font-size: 14px; margin-bottom: 10px; padding: 3px; cursor: pointer;" 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 = 'Close'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'View Again'; }" name="button" type="button" value="CONTOH SPOILER KEDUA, KLIK UNTUK MELIHAT!" /></div>
<div id="show" style="display: none;">
<img src="http://info-menarik.net/wp-content/uploads/2015/04/Cara-Membuat-Spoiler-Di-WordPress-1.jpg" alt="Cara Membuat Spoiler Di WordPress" width="600" height="450" />
</div><div id="hide"></div></div>

Karena contoh spoiler kedua ini adalah untuk menampilkan gambar, maka tulisan warna merah pada kode Anda ganti dengan URL serta size gambar yang akan Anda ditampilkan.

Cara Ketiga Membuat Spoiler di WordPress

Untuk contoh spoiler ketiga ini adalah dengan menggunakan kode Javascript. Tombol show/hide Javascript ini sering kita temui dengan tampilan plus/minus. Berikut contoh tampilannya :


+ TAMPILKAN SPOILER

Berikut adalah kodenya untuk contoh spoiler ketiga :

<script language="javascript">
function toggle() {
var ele = document.getElementById("sembunyikan");
var text = document.getElementById("tampilkan");
if(ele.style.display == "block") {
ele.style.display = "none";
text.innerHTML = "+ TAMPILKAN SPOILER";
}
else {
ele.style.display = "block";
text.innerHTML = "- SEMBUNYIKAN SPOILER";
}} 
</script>
<a id="tampilkan" style="font-size:14px;text-decoration:none" href="javascript:toggle();" rel="nofollow">+ TAMPILKAN SPOILER</a>
<div id="sembunyikan" style="display: none;padding:5px; color: #000000; background: none repeat scroll 0% 0% #b8e3f2; border: 1px solid #00a7e3; width:98%; margin-bottom:15px">Spoiler adalah sekumpulan kode yang digunakan untuk menyembunyikan konten. Konten disini seperti tulisan, gambar, dan video. Spoiler dilengkapi dengan tombol untuk membuka dan menyembunyikan lagi konten. Secara otomatis konten yang disisipkan dalam kode spoiler akan tersembunyi dan begitu diklik tombolnya maka sisipan konten tersebut akan terlihat atau terbuka jelas.</div>

Silakan disesuaikan juga kalimat yang berwarna merahnya dengan kalimat yang Anda inginkan. Dan mungkin hanya itu saja tulisan tentang cara membuat spoiler di WordPress dengan mudah ini. Selamat mencoba dan semoga tidak menemui kesulitan yang berarti.

Referensi : http://www.w3schools.com

About InfoMenarik

Berbagi Info & Tips Trik Menarik tentang Seputar EPS-Topik Korea, Kesehatan, Microsoft Office, Pendidikan, Photoshop, Software, Teknologi, WordPress Terlengkap dan Gratis.

23 comments

  1. dengan menerapkan kode manual dalam membuat spoiler, selain memperindah tampilan post juga sangat membantu dalam mengurangi beban loading secara langsung mas

  2. kode spoilernya tidak beda jauh dgn blogger ya Mas..!
    spoiler jg bagus buat penasaran pengunjung.. hihihihi

  3. mas bagus spoiler nya, diblogger ada ga ya, aku kok ga tahu ya

  4. spoiler ketiga nih kayaknya yg cocok buat blog ku mas.
    izin mencobanya ya

  5. jujur mas baru tahu saya kalo membuat spoiler itu menggunakan kode seperti di atas

  6. kalau untuk blog ada gax mas ? untuk WP saya hanya bisa nyimak aja hihihihih

  7. ini seringkali dijumpai di forum ya bang kalau di blogspot boleh tidak kodenya dipakai

    • Iya mas, karena Forum setiap harinya pasti banyak yang posting. Maka untuk memaksimalkan kinerja loading Forum dibuat spoiler untuk menyisipkan gambar dan video.

  8. thanks Mas, selalu dapet informasi yang bisa dipakai di sini deh..

  9. gak bisa buat blog ane donk, ane pake blogspot sob

  10. Jadi kayak di kaskus-kaskus gitu ya, mas..
    Saya pakai blogspot. Belum bisa bikin spoiler di postingan, hehe.

  11. Instant Website

    Min untuk script ini apakah membuat loading blog lama? Dan masuk ke html template ya ini min?

    • Kalau di khawatirkan akan membuat loading blog, sebaiknya mas pilih kode yang tidak ada Javascriptnya saja.

  12. terima kasih informasinya y mas, sudah saya terapkan di web saya, dan membuat web lebih cepat untuk diakses.

Leave a Reply

Your email address will not be published. Required fields are marked *