Cara Membuat Tombol Show & Hide

Tombol Show & Hide ini bisa anda gunakan untuk

meletakkan apa saja, misalnya untuk Kode tutorial,

link ataupun gambar. Pemakaian tombol Show &

Hide ini sangat efisien terutama karena dapat meng-

hemat ruang di blog anda. Contohnya seperti yang

ada di bawah. Coba saja anda klik pada tombol

Show & Hide ini. Klik sekali untuk Show-nya dan

klik sekali lagi untuk Hide-nya.

Show & Hide

Sudahkah mengikuti RUANG SAHABAT blog ini ?
Kalau belum, isilah terlebih dahulu .....
sebelum anda menggunakan tutorial ini.

Anda mau mencoba ? Mudah untuk membuatnya,
ikuti langkahnya seperti berikut ini :

Masukkan kode yang ada di bawah ini pada
sidebar atau pada postingan anda.

KODE UNTUK TEKS =

<script type="text/javascript"><br /> function showhide(toggle) {<br /> //change target element mode<br /> var elementmode = document.getElementById(toggle).style;<br /> elementmode.display = (!elementmode.display) ? 'none' : '';<br /> }<br /> function openclose(toggle) {<br /> showhide(toggle);<br /> }<br /> </script><br /> <br /> <a href="javascript:openclose('toggle');" style="text-decoration: none; padding: 3px 5px 3px 5px; border: 1px solid #999999;">Show & Hide</a><br /> <div id='toggle' style='display: none; padding: 10px; background: #00FF00;'><br /> <em>Teks Anda Letakkan Di Sini</em></div>

KETERANGAN :

Masukkan kode, link atau kalimat anda
pada kode Teks Anda Letakkan Di Sini.

Ubahlah warna backgroundnya sesuai
dengan warna yang anda inginkan.

KODE UNTUK GAMBAR =

<script type="text/javascript"><br /> function showhide(toggle) {<br /> //change target element mode<br /> var elementmode = document.getElementById(toggle).style;<br /> elementmode.display = (!elementmode.display) ? 'none' : '';<br /> }<br /> function openclose(toggle) {<br /> showhide(toggle);<br /> }<br /> </script><br /> <br /> <a href="javascript:openclose('toggle');" style="text-decoration: none; padding: 3px 5px 3px 5px; border: 1px solid #CCCCCC;">Show & Hide</a><br /> <div id='toggle' style='display: none; padding: 10px; background: #0000FF; width: 500px; height: 250px;'><br /> <center><a href="#" target="_blank"><img src="URL Gambar Anda Di Sini" /></a></center></div>

KETERANGAN :

Masukkan gambar yang anda miliki
pada kode URL Gambar Anda Di Sini

Ubahlah warna backgroundnya sesuai
dengan warna yang anda sukai.

Aturlah ukuran backgroundnya
pada kode width: & height:
sesuaikan dengan gambar anda.

PEMAKAIAN :

Untuk di Sidebar :

Tambah Gadget -> HTML/JavaScript.

Untuk di Postingan :

Masukkan kode tersebut dalam modus
Edit HTML, bukan Compose

Selamat mencoba, good luck!