Membuat Show/Hide pada Postingan Blog

Walau sedikit ketinggalan tapi setidaknya buat temen temen yang punya blog dan baru mau buat blog serta belum tau, sedikit berbagi saling share tentang bagimana membuat show/ hide pada postingan atau biasanya dimanfaatkan untuk menyembunyikan gambar atau pun kalimat dalam blog. Nah tampa mengulur waktu panjang sedikit tutorial cara membuatnya:

contoh gambar hasil implementasinya

Langkah langkah

1. Login masuk ke deshboard blog anda
2. Pilih Create New posting (tunggu sampai muncul halaman postingan)
3. Ada dua pilihan format untuk postingan yang pertama format compose dan yang kedua HTML.
4. Pilih tipe format HTML letakan kode html dibawah ini:(tinggal copy dan pastkan pada posisi yang temen temen kehendaki)

<div><div style="margin-bottom: 2px;"><b><small>Show</small></b>
<input value="Show" style="margin: 0px; padding: 0px; width: 60px; 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 = 'Hide'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Show'; }" type="button"></div>
<div style="border: 1px inset; margin: 0px; padding: 6px;"><div style="display: none;">
Masukkan tulisanmu di sini
</div></div></div> 

Sekali lagi copy paste code di atas dan jangan lupa mengganti kata yang berwarna merah dengan kata atau kode yang ingin teman-teman masukkan. Teman-teman juga bisa mengganti kata yang berwarna Hijau dengan kata yang diinginkan atau buang juga gpp :-). Masukkan kode di atas ke dalam postingan atau di sidebar blog teman-teman, maka hasilnya bisa dilihat di bawah ini.

Masukkan kalimat atau tulisan ataupun gambar di sini

Demikian sedikit tentang tutorial show hide pada postingan semoga bermanfaat

Artikel Terkait Tutorial