Membuat Tombol Klik/Show di Postingan Blog

Halo sob!!!

kalian mungkin pernah melihat Tombol Klik/show dipostingan blog atau di web manapun itu. tombol klik/show adalah tombol untuk menyembuyikan beberapa tulisan, kode, atau apapun itu di postingan blog sobat. tujuannya adalah untuk merampingkan postingan blog sobat agar terlihat lebih simpel dan tidak banyak tulisan. contohnya seperti dibawah ini :

Klik show untuk melihat

MAsukkan tulisan yang akan di sembunyikan di sini

kalian dapat meletakkan tulisan apa saja di dalam kotak show tersebut, misalnya:

• kode program
• gambar desain
• dll

oke. lets do it!!

1. Buka halaman entri di blog kamu,pilihlah bagian HTML

klik gambar untuk memperbesar

2. Pastekan code berikut di laman HTML:

<div>
<div style="margin-bottom: 2px;"> <div style="margin-top: 5px; text-align: left;">
<b><small>Klik show untuk melihat</small></b>
<input 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" style="font-size: 10px; margin: 0px; padding: 0px; width: 60px;" type="button" value="Show" /></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;">
<div style="display: none;">
Masukkan tulisan yang akan di sembunyikan di sini</div>
</div>
</div>
</div>

Keterangan:

• gantikan tulisan "Klik show untuk melihat" sesuai keinginanmu.
• gantikan tulisan Show sesuai keinginanmu.
• ganti Masukkan tulisan yang akan di sembunyikan di sini dengan tulisan artikel kamu sendiri.
• jika kamu mau memasukkan gambar.ganti Masukkan tulisan yang akan di sembunyikan di sini dengan: <img border="0" height="320" src="Masukan Link photo yang kamu inginkan" width="300" />
• tanda left menyatakan tombol show terletak di bagian kiri, kamu dapat menggantikan letaknya sesuai keinginan kamu. yaitu: right(kanan), center(tengah).

Bila kalian hendak meletakkan kotak klik/show ini di tengah-tengah postingan kalian maka ikuti instruksi berikut:

1. Masuk kehalaman entry, pilih bagian compose

klik gambar untuk memperbesar

2. tulislah postingan kalian terlebih dahulu. kemudian, tekan enter beberapa kali sesuai kebutuhan.

3. Pilih bagian HTML.

4. Pastekan Kode klik/show tadi di bagian paling bawah diantara kode: <div class="separator" style="clear: both; text-align: justify;"> dan <br /> (daerah yang dilingkari biru)

klik gambar untuk memperbesar

5. lanjutkan kembali tulisan kalian.

Untuk meletakkan kotak klik/show lagi maka kalian tinggal mengulangi langkah diatas. selamat mencoba sob!!

kalian bisa memvariasikan sendiri tombol show/klik dengan mencoba-coba merubah kodenya. hahaha.

Baca postingan lain yang serupa : KLIK