Arsip

Followers

Membuat Menu Spoiler

Kali ini ane akan membahas tentang cara membuat tombol hide-show atau juga lebih dikenal dengan istilah spoiler. manfaat dari tombol hide-show atau spoiler ini adalah untuk menyingkat suatu tampilan fitur atau objek lain, bisa teks ataupun image/gambar. Misalnya saja agan punya artikel yang panjaaang sekali, dan takut kalau para pembaca nantinya merasa jenuh, nah teman-teman bisa menggunakan tombol spoiler ini, untuk menyingkat beberapa dari bagian artikelnya teman-teman sehingga akan lebih menarik.

Nah kalau penasaran apa itu spoiler, bisa tuh langsung melihat contoh tampilan di Blog ane yang lain, adanya di sebelah kanan.
Bagi agan yang belum tahu cara memasangnya, ikuti melalui langkah-langkah berikut ini:

1. Login ke blogger.com.

2. Klik Tata Letak.

3. Klik Tambah Gadget/ Add Gadget.

4. Pilih HTML/JavaScript.

5. Masukkan kode berikut ini, dan jangan lupa klik simpan:

4. Pilih HTML/JavaScript.

5. Masukkan kode berikut ini, dan jangan lupa klik simpan:





<div><div style="margin: 5px;">
<div style="margin-bottom: 2px;" class="bigfont"><input style="margin: 0px; padding: 0px; width: 95px; " value="Tampilkan" 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 = 'Tampilkan'; }" type="button"/>
</div>
<div style="border: 0px inset ; margin: 0px; padding: 6px;" class="alt2">
<div style="display: none;">

Silahkan diisi apa saja di sini, yang ingin agan singkat
</div></div></div></div>


Ket:
- Biru: Silahkan anda ganti dengan kata-kata yang anda inginkan misal: Munculkan, atau show!
- Merah: Anda bisa menggantinya dengan kata yang anda inginkan, misal: Hide, atau hilangkan!
- Hijau: Silahkan disisipi dengan teks atau kode yang memang perlu disingkat.

ARTKEL TERKAIT



Komentar :

ada 0 comments ke “Membuat Menu Spoiler”

Post a Comment

Zona On Facebook

Populer

Aneka Bisnis

 
Powered by Blogger.com | 2008 Copyright Cah Semarang Weblog | E-mail: ari.complex@yahoo.co.id