Banyak cara untuk membuat spoiler dalam posting blog. namun kali ini hanya akan membahas 2 cara membuat spoiler di blog, yaitu: Pada cara pertama, tombol spoiler akan "terlempar" ke bawah isi spoiler ketika dibuka.
Pada cara kedua, spoiler akan tetap berada pada posisinya ketika dibuka.
Baiklah, agar tidak berbelit-belit, kita akan langsung pada pembahasan cara membuat spoiler
1. Membuat Spoiler di Blog dengan Tombol Spoiler Terlempar ke bawah
Sulit untuk menjelaskan dengan kata-kata tentang spoiler ini. Agar lebih jelas, langsung saja sobat lihat dan coba contoh demo tombol spoiler berikut.
BUKA/TUTUP SPOILER
Begitulah kira-kira gambaran spoiler jenis ini. Untuk bisa menerapkan kode buka/tutup spoiler di blog ini sobat mesti menggunakan mode HTML pada saat menulis posting.
Caranya; Login ke Blogger > New Post atau Entri Baru > Pilih mode HTML, kemudian terapkan kode berikut ini untuk membuat spoiler (buka spoiler di bawah ini).
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.
Keterangan:
Tempatkan isi teks/image/video spoiler pada teks berwarna biru.
Ganti teks berwarna merah ("BUKA/TUTUP SPOILER" dan "Klik untuk membuka spoiler") sesuai keinginan.
Untuk mengganti warna box, ukuran text, warna, dan lainnya, ganti/sesuaikan teks berwana orange.
Membuat Banyak Spoiler pada Satu Posting / Halaman Blog
Jika Sobat mau menggunakan beberapa spoiler dalam satu halaman posting, gunakan id unik untuk setiap spoiler. caranya adalah dengan mengganti kata "spoiler" dalam kode dengan kata lain. contohnya seperti berikut (perhatikan yang berwarna biru).
Kode Spoiler Pertama
<div id="spoiler" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.
Kode Spoiler
Kedua
<div id="spoiler1" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.
Kode Spoiler Ketiga
<div id="spoiler2" style="display: none;">
Letak Konten Isi Spoiler (Text/Gambar/dll)</div>
<button onclick="if(document.
2. Membuat Spoiler di Blog dengan Posisi Button Tetap
Sama seperti cara pertama, berikut ini contoh demo spoiler dengan posisi button tetap (seperti spoiler forum).
Judul Spoiler:
Untuk bisa menerapkan kode buka/tutup spoiler di blog dengan posisi tombol tetap ini sobat mesti menggunakan mode HTML pada saat menulis posting. Caranya; Login ke Blogger > New Post atau Entri Baru > Pilih mode HTML, kemudian terapkan kode berikut (klik spoiler dibawah untuk melihatnya kode spoiler posisi tetap).
<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.
</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>
Keterangan:
Tempatkan isi teks/image/video spoiler pada teks berwarna biru.
Ganti teks berwarna merah (Judul Spoiler dan buka) sesuai keinginan.
Namun begitu, mungkin Sobat merasa kurang puas dengan tampilan spoiler tersebut, sobat bisa menambahkan style (perhatikan kode berwarna biru) seperti berikut.
<div style="margin: 5px 10px 10px;">
<div class="smallfont" style="margin-bottom: 2px;">
<b>Judul Spoiler</b>: <input onclick="if (this.parentNode.parentNode.
<div class="alt2" style="background: cyan; border-left-color: lightblue; border-left-style: solid; border-left-width: 10px; color: blue; padding: 5px 2px;">
<div style="display: none;">
Letakkan teks atau kode script (gambar atau video) di sini
</div>
</div>
</div>
you get the best experience on our website More info
Cara Download Gratis Terjemahan Textbook Bahasa Indonesia
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.
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.
<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
Got it!
This website uses cookies to ensure you get the best experience on our website More info
Buku Pembelajaran Bahasa Korea Gratis, Terjemahan Textbook 2015 EPS-Topik
Home / WordPress / Cara Membuat Spoiler Di WordPress Dengan Mudah
Cara Membuat Spoiler Di WordPress Dengan Mudah
InfoMenarik 03/04/2015 WordPress 23 Comments 159 Views
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.
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.
<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 :
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.
<div id="show" style="display: none;">
<img src="http://info-menarik.net/w
</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("
var text = document.getElementById("
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-
<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.
Untung Rugi / Kelebihan Kekurangan Spoiler di Blogspot dan wordpress
- Menghemat space (tinggi) posting
Mempercepat loading halaman blog, dan
- Menghemat kuota pembaca.
Bisa untuk menyembunyikan keyword tertentu untuk optimalisasi posting (tidak dianjurkan)
Namun begitu, bukan berarti memasang spoiler tidak membawa kerugian / kelemahan. Kerugian memasang spoiler adalah,
- Blog akan ditinggalkan pengunjung. Tidak semua pengunjung mengerti cara membuka spoiler, ataupun mereka terkadang malas .hee
- Akah mesin pencari juga mengindeks isi spoiler atau tidak. Bagi Anda yang tahu, silakan komen dibawah.
dan lainnya (bisa sobat tambahkan dengan menulis di kolom komentar).
Semoga bemanfaat
Nara sumber ; www.w3schools. com