Cara Membuat tombol Show / Hide di Postingan Blog ini sangat mudah dalam pemasangannya. Kita hanya membutuhkan beberapa script yang akan dipasang dalam postingan. Tidak perlu melakukan edit HTML dalam template.
Beberapa keuntungan memasang tombol show / hide di postingan blog
(i) Dapat menghemat space postingan
Bagi Sobat yang mempunyai blog tutorial
seringkali membagikan script yang panjang dan terkesan memakan banyak space
dalam postingan. Dengan memasang tombol show / hide ini hal tersebut dalam di
atasi. Selain dengan memasang tombol show / hide, untuk menghemat space
postingan Sobat juga dapat menggunakan text area seperti dalam postingan saya
terdahulu Trik Membuat Text Area di dalam Postingan Blogspot.
(ii) Dapat
membuat tampilan postingan lebih rapi
Ada beberapa
syarat agar postingan tampak rapi, salah satunya adalah dengan pemilihan rata
kanan kiri atau justify. Bila objek berupa teks biasa rasanya tidak ada masalah
jika menggunakan rata kanan kiri atau justify, tetapi jika objek berupa script
maka akan terlihat aneh, karena biasanya script tidak memiliki space atau jarak
antar kata. Masalah tersebut dapat diatasi juga dengan menggunakan tombol show / hide ini
Cara Membuat tombol Show / Hide di Postingan Blog
Cukup Sobat copy script
berikut dan paste-kan pada editor post pada mode HTML bukan Compose seperti
biasa
<div><div style="margin-bottom: 2px;"><b><small>Klik show untuk melihat</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 objek di sini</div></div></div>
Jika objek yang
dimasukkan berupa script, terlebih dahulu parse kode script tersebut sebelum
dimasukkan ke dalam postingan, hal tersebut agar script tidak terbaca sebagai
perintah, melainkan sebagai teks biasa. Sobat dapat memparse kode tersebut di
sini.
Demikian Cara Membuat tombol Show / Hide di Postingan Blog ini,
semoga artikel ini dapat bermanfaat dan berguna untuk Sobat semua yang pemula
seperti saya. Happy blogging!