Cara membuat text-box keren mobile friendly untuk blog

Cara membuat text-box atau script box pada blogger.

Sering juga kita mencari apa yang kita butuhkan, yang paling utama adalah kumpulan kode kode html atau css dan lain lain untuk situs kita maupun diuji coba untuk belajar sendiri. Dan terkadang kita juga butuh pengetahuan yang ada banyak di internet, maka kita perlu source kode yang ada pada situs-situs web.kita hanya perlu menyalin kode script dari situs lain ke keperluan kita. Berikut contoh gambar script box.

Text box yang digunakan disini bukanlah tex-area . Kode yang digunakan yaitu <div> dengan artibut <div="style"/> untuk membuat bagan atau tempat text box, berikut contoh kode untuk pembuatan text-box yang keren. <div style="border: 2px solid black; height: 145px; overflow-x: scroll; overflow-y: scroll; width: auto;"><div style="width:250%;height:250%;">

- Penjelasan kode diatas,kode diatas untuk text box yang bisa scroll vertical dan horizontal.

• Div Menjelaskan divisi yang akan diberi style, div harus diakhiri dengan tag <div<> sebagai penutup.
• Div style Divisi yang diisi dengan style , seperti atribut atribut dibawah
• Border Yaitu garis yang akan memberi batasan pada seluruh tempat yang di atributkan.
• Height, tinggi box area atau tempat
• Width lebar box area atau tempat
• Overflow

Yaitu luapan maksudnya adalah atribut untuk memilih apakah bisa di scroll atau tidak, untuk overflow-y ,untuk scroll kekanan maupun kekiri, Overflow-x, untuk scroll ke atas bawah.

- model Text box Silahkan pilih model yang kalian mau ambil, dibawah ini sudah tersedia preview box dengan kode didalamnya, jadi tinggal copy saja. - model Text box [ scroll atas dan bawah ]

A. Model scroll

Test---- Test---- Test---- Test----

B. Script box non-scroll Silahkan pilih sesuka kalian. Jika kalian ingin menambah kan scrol ,tambah kan kode ini : <div style=" width:250%; height:250%;"/> ....tulisan kalian.... </div> Tinggal tambahkan kode diatas setelah tulisan kalian ya.

- Model 1

<div style="background-color: #d9da81; border: 2px #6E2222 solid; padding: 10px; text-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div><Br>

- Model 2

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid #2288dd; border-radius: 10px; padding: 10px; t-align: left;">Kode Script Sobat Disini</div><br/>

- Model 3

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid #999; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div><br>

- Model 4

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed #aaa; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div><br/>

- Model 5

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div><br/>

- Model 6

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset #fff; padding: 10px; t-align: left; height: 30px; overflow: auto; width: auto;">Silahkan simpan tulisan kalian yang akan menggunakan scroll box disini</div><br>

* Langkah terakhir / cara pemasangannya : Untuk langkah yang paling mudah adalah, dengan install aplikasi blogger android, Masuk ke postingan yang akan di edit > tambahkan kode script yang akan anda bagikan atau buat artikel, > simpan > lalu buka blogger di google chrome > edit artikel tadi > tambakan kode tersebut di bagian " tulisan pada kode diatas. Cara kedua : masuk ke blogger > postingan > edit > mode compose > tempel kode diatas lalu tambahkan kode diatas .

Sekian artikel dari saya. Jangan lupa tinggalkan jejak komentar. Untuk ada yang ditanyakan