Cara Membuat Spoiler / Menyembunyikan dan Menampilkan Gambar dengan Form Button Link

Cara Membuat Tombol untuk Menyembunyikan dan Menampilkan Text dan Gambar

Sepertinya sobat sudah pada kenal yang namanya form button ya,pernah sebelumnya blog ini juga sharing bagaimana membuat form button dengan posisi berjejer alias horizontal.
Namun kali ini,Pelajaran Blog bukan sharing bagaimana membuat link form button melainkan membuat form button untuk menyembunyikan dan menampilkan sebuah teks atau image(gambar),atau yang sudah agan tahu dengan istilah spoiler.

Contohnya seperti di bawah ini:

Caranya,sobat tinggal masukkan kode dibawah ini pada postingan sobat ya :D


<div><input type="button" value="Lihat Gambar" style="margin:0px;padding:0px;" 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 = 'Lihat Gambar'; }">
</div>
<div style="background: #ffffff; margin: 10px auto;
border: 0px solid #000;
padding: 5px;">
<div style="display: none;">
<img src="http://a0.twimg.com/profile_background_images/314865843/mrpujiajadeh.gif" alt="Cara Mudah dan Cepat Membuat Spoiler di Blogger" title="Cara Membuat Spoiler di Blogger." width="300" height="200"/>
</div>
</div>

Kode yang berwarna merah,adalah dimana obyek akan ditampilkan atau disembunyikan,bisa sobat ganti berupa teks saja,sebuah gambar maupun video kesukaan kamu,that's it :D

Horizontal Form Button Link

Membuat Link Form Button Berjejer / Horizontal: "
Jika sebelumnya saya pernah memposting tentang membuat form button,sekarang kita akan membahas tentang membuat form button berjejer.
Untuk sebuah form,jika di sejajarkan akan mengalami sedikit kesulitan.
Disini kita akan mengakalinya dengan menambahkan tabel,untuk meletakkan form-form yang akan kita publikasikan.

<p align="center"><table border="0" cellspacing="1"
width="104"><tr>

<td width="72"><form method="get"
action='http://www.google.com/'target='_blank"><p><input type="submit"
value='Google'
name="1"></form></td>

<td width="69"><form method="get"
action='http://www.yahoo.com/'target='_blank"><p><input type="submit" value="Yahoo'
name="2"></form></td>

<td width="69"><form method="get"
action='http://www.youtube.com/' target='_blank"><p><input type="submit" value="Youtube'
name="3"></form></td>

<td width="69"><form method="get"
action='http://www.Friendster.com/' target='_blank"><p><input type="submit" value="Friendster'
name="4"></form></td>

</tr></table>

---

Untuk tulisan warna hijau,rubah sesuai atribut blog anda,jika anda ingin memposisikan form-form diatas,ke kiri,tinggal merubah baris kode yang berwarna merah.
Untuk posisi tengah='center', kiri='left' sedangkan untuk kanan='right',namun masalah posisi,biasanya browsre IE yang berfungsi dengan baik.
Untuk hasil eksekusi diatas,jika anda menginginkan link akan terbuka,pada window yang sama,gantilah kode _blank gantilah dengan _self.

Gimana? minat mau mencoba?

---

Baca Juga Yang Ini..

• Membuat Link berupa Gambar Animasi
• Membuat Link berupa Form
• Membuat Daftar Isi pada Blog

Form Button Link

Membuat Link berupa Form Button: "

Membuat Link berupa tombol atau form button sebenarnya,disamping menambah kecantikan namun sekaligus merangsang pengunjung untuk mengklik form tersebut. Kodenya,anda bisa copy di bawah ini: <form method="get" action="http://pelajaran-blog.blogspot.com/' target="_blank"> <input type="submit" value="Contoh saja!" name="q"> </form> Untuk tulisan http://pelajaran-blog.blogspot.com/ anda rubah sesuai nama blog anda. Untuk tulisan Contoh saja!,rubah sesuai keinginan anda. Sedangkan untuk tulisan _blank gantilah dengan _self jika anda menginginkan halaman,akan terbuka pada halaman itu sendiri,bukan pada jendela baru. Gimana siap mencoba? Baca Juga Yang Ini.. Membuat Link Berupa Form Berjejer /Horizontal Membuat Daftar Isi pada Blog Meletakkan Video kedalam Blog