Kamis, 13 Januari 2011

Membuat Tombol Jika Di Klik Muncul Teks/Gambar

Duh bingun juga mau dikasih judul apa. Namanya saja saya tidak tahu, jadi pakai judul ala kadarnya deh. Cara ini bukan seperti pada artikel membuat tombol submit beserta link, namun ada baiknya anda membacanya, sekalian juga membaca artikel cara mengambil image location dengan browser HP dan cara pasang gambar di postingan lewat HP karena akan membantu anda jika anda seorang mobile blogger :D.
Lalu seperti apa tombol yang dimaksud pada judul di atas? Yang pasti dengan tombol ini anda bisa menghemat tempat pada halaman posting.

Daripada ngalor-ngidul nggak jelas, langsung ke cara dan contoh saja.

Gunakan kode ini untuk membuatnya:


<div><div style="margin: 5px;"><div class="smallfont" style="margin-bottom: 2px;"><input value="Tampilkan" style="margin: 0px; padding: 0px; width: auto; 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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Tampilkan'; }" type="button"/></div><div class="alt2"><div style="display: none;"><div style="border: 1px dotted #006400; text-align: justify;">isi teks atau kode gambar yang disembunyikan dibalik tombol</div></div></div></div></div>

Nah, hasilnya akan menjadi seperti tombol di bawah ini (silahkan di klik)


isi teks atau kode gambar yang disembunyikan dibalik tombol

Perhatikan pada kode yang saya beri warna biru dan kuning, tulisan-tulisan tersebut dapat anda ganti sesuai keinginan.
Dan pada teks yang berwarna hijau, anda isi dengan tulisan atau gambar yang ingin anda sembunyikan dan akan tampil setelah tombol di-klik. O iya, anda juga dapat bereksperimen dengan mengutak-atik tag style-nya.

Maaf, bagi para pengguna ponsel anda bisa baca cara copy-paste artikel blog dengan HP DISINI untuk meng-copy script di atas.

Sekian, moga berguna.

Sumber : http://www.bi2t.com/

5 komentar:

  1. Ini yang lagi aku cari. Makasih atas tutorialnya bro :)

    BalasHapus
  2. Wuii..iiihh , artikel yang menarik...!!! Sukses selalu sob...

    BalasHapus
  3. To masluhur.com & Regina Karya Invitation card : thanks atas kunjungannya. Thanks juga atas komentarnya. Apabila ada yang kurang dari artikel ini, mohon kritik dan sarannya.
    thanks all....

    BalasHapus
  4. Makasih Infonya...
    mau tanya Bung... Postingan atau Tulisannya yang tidak disembunyikan ditaruh sebelah mana ??

    BalasHapus
  5. to Mufty : maaf ya klw pertanyaannya bru dibalas..
    untuk postingan maupun tulisan yang tidak disembunyikan bisa kamu taruh di luar kode HTML di atas. Sebelumnya kamu ketik postingan tsb menggunakan TEKS biasa. Nanti saat memposting untuk tulisan yang ingin kamu sembunyikan, kamu masuk pada HTML, copas kode HTML di atas trus kamu ketik tulisan/postingan yang ingin kamu sembunyikan pada tulisan "isi teks atau kode gambar yang disembunyikan dibalik tombol"
    semoga bisa membantu ya gan...

    BalasHapus

Silahkan tinggalkan pesan, saran, kritik, maupun komentar anda demi kesempurnaan posting ini....!!!!