Tanpa Aplikasi! Inilah Cara Mengambil Foto Atau Video Di Status Whatsapp Kontak Kita!

Cara Buat Text Box

Ruang Digital - Apa kabar kalian semua? Semoga baik-baik aja, Pada Artikel kali ini Saya akan membagikan tutorial cara menambahkan Kotak Script atau Biasa disebut oleh para blogger dengan sebutan Text Box. Contoh nya seperti Dibawah ini

cara membuat kotak script dalam postingan blog

Sebelumnya saya juga bingung Bagaimana cara menambahkan Text Box atau Kotak Script pada Postingan Blog. Ternyata Setelah Saya searching di google tentang cara menambahkan Text blog di blogger ada banyak sekali. Sebenarnya jika kita menguasai HTML, untuk membuat Text box pada postingan blog sangat mudah. Tetapi tidak semua memahami coding HTML jadi ya bisa dibilang mending cari aja lah dari pada lama :v. Oke Sebelum di lanjut kita bahas sedikit mengenai Text Box. 

Jadi apa Itu Text Box atau Kotak Script pada Blog?

text box area atau Kotak Script adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code baik yang biasa maupun dengan fungsi scroll agar terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau website sehingga pengunjung pun lebih nyaman ketika sedang membaca artikel yang ada di situs web tersebut. 

Untuk memasang/membuat kotak html blog kita hanya perlu memasukkan/menambahkan kode script ke dalam posting blog yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Buat kalian yang bingung gimana cara nambahin Text box di blogger silahkan simak artikel berikut ini, Supaya tidak terjadi kesalahan dimohon untuk teliti ketika memasukan atau menambahkan Kode Html Text box pada postingan di blogspot.

Kali ini saya akan share gimana Cara Membuat Kotak Script Di Dalam Postingan Blog Mudah Dan Keren, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat kamu yang ingin membuat text box area yang keren pada artikel di blogspot.

Cara Membuat Kotak Script atau Text Box dalam Postingan blog:

1. Bikin Kotak Teks Html seperti diatas cukup mudah, silahkan masuk Ke dashboard blog dan buat postingan baru.

2. Isi judul Postingan kamu dan Pilih Mode HTML bukan Compose 

3. Setelah itu masukkan kode dibawah ini pada mode HTML kamu

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Masukin Tulisan Disini</div>

4. Seperti inilah tampilan kotak skrip atau Text Box tanpa scroll yang telah kamu buat

Halo om! :v

Kalau kamu ingin menggunakan scroll pada kotak script tersebut tinggal menambahkan kode yang berwarna kuning seperti dibawah ini

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left; height: 100px; width: 520px; overflow: auto;">
.Masukin Tulisan Disini</div>

Note: untuk mengubah ukuran bisa ganti angka pada Height (tinggi) dan Width (lebar) nya

5. Jika sudah fix bisa langsung di publikasikan dan lihat hasilnya.
Berikut adalah pilihan text box / kotak script yang berbagai macam bentuk dan warna yang bisa sobat gunakan agar terlihat lebih keren.

Kumpulan Kode Script HTML membuat Text Box di Blog

Note: Kode Text Box HTML Dibawah Tidak Menggunakan Scroll, kalau mau tinggal tambahin kode pada Tutorial nomor 4

Silahkan dipilih sesuai selera masing-masing:

<div style="border: 2px #1B1A76 dotted; padding: 10px; background-color:#c2c2c2; text-align: left;"> Masukin Tulisan Disini</div>

<div style="border: 2px #006400 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Masukin Tulisan Disini</div>

<div style="border: 3px #5f200e double; padding: 10px; background-color: #82CAFA; text-align: left;"> Masukin Tulisan Disini</div>

<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;">Masukin Tulisan Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>t-align: left;"> Masukin Tulisan disini</div>

<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;">Masukin Tulisan Disini</div>

<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;">Masukin Tulisan disini</div>

<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;">Masukin Tulisan Disini</div>

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; text-align: left;">
masukin Tulisan disini</div>

<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;">Masukin Tulisan Disini</div>

<div style="border: 3px #1780dd Double; padding: 10px;background-color:#ffffff; text-align: left;"> Kode Script Sobat Disini</div>