Cara Membuat Tombol Show / Hide di Postingan Blog

Cara Membuat Tombol Show / Hide di Postingan Blog

Cara Membuat Tombol Show / Hide di Postingan Blog

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!

Artikel terkait:

Bagikan: