Cara Menambahkan Text Area Buka Tutup Di Blog

Menambahkan scroll box cantik di blog. atau bisa disebut juga Text Box Beberapa waktu yang lalu saya pernah menuliskan artikel tentang Cara Membuat Scroll Box Di Postingan. Namun pada artikel tersebut, scroll box yang dibuat tanpa fariasi tutup buka atau bisa ditutup atau bisa juga dibuka. Untuk kali ini saya akan memberikan cara membuat scroll box atau bisa juga disebut text area yang bisa ditutup dan dibuka, lebih cantik dari yang sebelumnya.

Text book dengan fariasi ini memungkinkan kita menyimpan atau menyembunyikan sementara tulisan yang kita letakkan pada text box, sehingga tidak mengganggu tampilan posting atau artikel yang kita buat.

Resep ini bisa tercipta karena selalu berpikir bisa bikin cake apa ya dengan memanfaatkan bahan bahan yang sudah tersedia di rumah. punya banyak milo tak punya coco powder..cake ini bisa dibuat tanpa pisang / banana. bisa diganti dengan nanas kalengan atau vanilla flavor. biasanya saya oven 10 menit 180drjt kemudian turunkan mjd 160 derajat sekitar 35menit.

Contoh Scroll Box Buka Tutup

Dan juga seperti Contoh di atas, kelebihan Text Area atu Scroll Box atau text book yang bisa buka tutup ini, lebih menghemat halaman posting bila text atau tulisan yang akan kita tampilkan terlalu panjang, selain itu tampilan pada halaman postingpun terlihat lebih cantik dan lebih rapi.

Pembuatannya gampang, tinggal copy paste kode script di bawah ini dan tempatkan Teks yang akan dimuat kedalam scroll tepat pada tulisan Isi Tex.

<!---Start code show hide by;"miniblogger28.blogspot.com"--->
<br />
<div style="margin-bottom: 2px;">
<div style="margin-top: 5px; text-align: left;">
<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 = 'Tutup'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Buka'; }" style="font-size: 12px; margin-top: 5px; width: 60px;" type="button" value="Buka" /> </div>
<div style="background-color: black; border-bottom: 2px solid #ff0000; border-left: 20px solid #ff6600; border-right: 2px solid #ff0000; border-top: 2px solid #ff0000; margin: 0px; padding: 6px;">
<div style="display: none;">
<span style="color: white; font-style: italic;">
... Isi Teks ...
</span></div>
</div>
</div>
<!---End code show hide by;"miniblogger28.blogspot.com"--->

Catatan :
* Paste kode script di atas pada posisi halaman HTML buka pada posisi Compose


Silakan dicoba, semoga artikel singkat ini ada manfaatnya,-