Cara Membuat Text Box Area/Kotak Script Di Dalam Postingan Blog Terbaru

Kotak script atau yang biasa para blogger sebut yaitu text box area 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 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.

Jika teman-teman tertarik untuk membuat text box area atau kotak script yang keren pada artikel postingan di blogspot, teman-teman bisa mencoba Cara Membuat Kotak Script Di Dalam Postingan Blog Terbaru berikut ini.

Cara Membuat Kotak Script Di Postingan :
1. Pertama-tama masuk ke dashboard blog terlebih dahulu, dan buat postingan baru dengan klik + New Post untuk membuat artikel baru yang akan ditambahkan kotak script.

2. Masuk ke mode HTML view dengan cara klik tanda pencil yang terletak dipojok kiri atas.

3. kemudian pilih HTML view

jika sudah benar, nanti tampilannya akan berubah menjadai seperti ini

4. Setelah itu masukkan kode berikut (masih dalam mode HTML ya) :

<div style="background-color: white; border: 3px solid rgb(238, 238, 238); padding: 10px; text-align: left;">
Masukkan Kode Script Kalian Disini.</div>

#Ganti tulisan warna merah dengan script atau tulisan yang akan sobat masukkan dalam kotak.

Teman-teman bisa melihat hasilnya dengan klik Mode Compose view.
Jika sudah sesuai dengan yang diinginkan klik tombol Publish.

5. Berikut adalah hasil tampilan kotak script biasa tanpa scroll yang telah teman-teman buat..

Masukkan Kode Script Kalian Disini.

6. Jika sobat ingin menggunakan scroll pada kotak script tersebut tinggal menambahkan kode yang berwarna biru seperti dibawah ini

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

#Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya

Setelah dipublish nanti hasilnya kan terlahat seperti berikut ini.

Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba
Selamat mencoba

Sebagai tambahan, Berikut ini ada beberapa pilihan text box / kotak script berbagai macam bentuk dan warna yang bisa teman-teman gunakan agar tampilan blog teman-teman terlihat lebih keren :

<div style="background-color: white; border: 3px double rgb(23, 128, 221); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>

<div style="background-color: #eaeaea; border: 1px solid rgb(68, 68, 68); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-left: 5px solid rgb(34, 136, 221); border-radius: 10px; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #ffe599; border-radius: 10px; border: 2px dashed rgb(170, 170, 170); padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #f3f3f3; border-radius: 10px; border: 4px solid rgb(153, 153, 153); padding: 10px; t-align: left;">Kode Script Sobat Disini</div> <br /><br />

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #6fa8dc; border-radius: 10px; border: 4px double rgb(255, 255, 255); padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="background-color: #57aa52; border: 2px dashed rgb(97, 11, 56); padding: 10px; t-align: left;"> Kode Script Sobat Disini</div>

<div style="-moz-border-radius: 10px; -webkit-border-radius: 10px; background-color: #a2c4c9; border-radius: 10px; border: 4px outset rgb(255, 255, 255); padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

<div style="background-color: #82cafa; border: 3px double rgb(95, 32, 14); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>

<div style="background-color: #d5839f; border: 2px inset rgb(0, 100, 0); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>

<div style="background-color: #c2c2c2; border: 2px dotted rgb(27, 26, 118); padding: 10px; text-align: left;"> Kode Script Sobat Disini</div>

#Jika ingin menambahkan scroll tinggal menambahkan kode height widht dan overflow seperti pada langkah no 6 di atas.

Nah itulah bagaimana cara membuat kotak script di dalam postingan blog dengan mudah dan cepat.

Silahkan dicoba

Posted in: Blog,HTML,Tutorial