Cara Mudah Membuat Tombol Show/Hide Button Untuk Blogger atau WordPress

  • Whatsapp
website html code browser view printed white paper closeup view
Website HTML code browser view printed on white paper, closeup view.

Hallo blogger, pada kesempatan kali ini Admin infosolution.biz akan membahas cara membuat tombol show/hide text di blog kalian. Cara ini dapat di terapkan pada blogspot ataupun wordpress. Selain itu membuat tombol show/hide text tidak memerlukan plugin khusus. Anda cukup mengtikan kode HTML berikut ke “text” yang ingin di show/hide.

Membuat Show/Hide Button dengan HTML dan Javascript

Untuk membuat tombol show/hide Anda memerlukan kode HTML dan Javascript. Nantinya kode HTML ini akan kita gabungkan dengan Javascript agar dapat menjalankan fungsi dari show/hide text button pada blog Anda.

Javascript Menurut Para Ahli

Javascript merupakan bahasa pemrograman tingkat tinggi dan dinamis yang diciptakan oleh Brendan Eich dan dikembangkan oleh salah satu perusahaan peramban terkenal hingga saat ini yaitu Mozilla Foundation dan Netscape Communications Corporation, bahasa pemograman ini bekerja pada beberapa peramban terbarukan seperti Google Chrome, Mozilla Firefox, Microsoft Edge, Safari dan lain-lain.

Javascript merupakan bahasa pemograman asynchronous dimana artinya bahasa pemrograman ini akan bekerja dilatar belakang dimana proses pengerjaannya itu online tetapi tidak langsung, sederhananya seperti proses latar belakang dimana program akan bekerja sekaligus dengan interaksi yang kita lakukan, berbeda dengan bahasa pemograman seperti PHP dimana kita harus menunggu proses kerja PHP selesai baru kita bisa berinteraksi.

Contoh sederhana dari asynchronous adalah seperti membuat suatu html tag muncul atau menghilang dengan menekan sebuah tombol, berikut cara membuatnya.

Baca Juga:  At 12:00 WIB: Rupiah Weakens to Rp. 13,920 / US $

Cara Membuat Show / Hide Button dengan HTML dan Javascript

1. Kamu buat berkas .html baru sesuai keinginan kamu.
2. Lalu kamu ketik kode di bawah ini pada berkas .html yang telah kamu buat menggunakan aplikasi IDE kesukaan kamu atau bisa juga menggunakan notepad jika kamu tidak memiliki aplikasi IDE.

3. Jika kamu sudah memasukan kode di atas, sekarang kamu tambahkan kode di bawah ini tepat di bawah kode di atas.

4. Dari ke dua HTML dan Javascript tersebut, kalian gabungkan seperti ini:

5. Lalu coba kamu jalankan berkas .html tersebut di peramban yang biasa kamu gunakan.
6. Selesai.

Catatan:

Pada bagian Simpan Objek apapun disini untuk dihilangkan/dimunculkan. merupakan tempat dimana kamu akan menyimpan semua objek HTML yang akan kamu gunakan misalnya seperti menyimpan Teksboks, radio button dan lainnya sehingga objek tersebut akan muncul atau menghilang ketika pengguna mengklik tombol Klik Saya.

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.

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.

Baca Juga:  Download Gift Wallet Terbaru

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 atau Blogger

Berikut adalah kodenya untuk contoh spoiler pertama :

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

Cara Kedua Membuat Spoiler di WordPress atau Blogger

Berikut adalah kodenya untuk contoh spoiler kedua :

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 atau Blogger

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.

Berikut adalah kodenya untuk contoh spoiler ketiga :

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.

Akhir Kata

Itulah informasi “Cara Mudah Membuat Tombol Show/Hide Button Untuk Blogger atau WordPress” yang dapat admin infosolution.biz sampaikan. Semoga bermanfaat.

Jika Anda menyukai artikel ini, jangan lupa klik lonceng yang ada di kanan bawah ya untuk mengetaui informasi terupdate dari kami. Dan ikutin juga fans page facebook kami di sini https://www.facebook.com/infosolution.biz serta chanel youtube kami https://www.youtube.com/user/ochezz/videos dan instagram kami https://www.instagram.com/infosolution.biz/. Kamipun memiliki kumpulan source code di GitHub. Terima Kasih

Pos terkait

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *