Cara Menciptakan Kotak Script Di Dalam Postingan Blog Terbaru

Kotak script atau yang biasa para blogger sebut ialah text box area adlah sebuah kotak yang di dalam nya sanggup dimasukkan goresan pena atau script code baik yang biasa maupun dengan fungsi scroll supaya terlihat rapi dan teratur pada sebuah postingan di blogspot, wordpress, atau WEBsite sehingga pengunjung pun nyaman dikala sedang membaca article yang ada di situs WEB tersebut. Untuk memasang / menciptakan kotak html blog kita hnya perlu memasukkan / menambahkan isyarat script ke dalam posting blog yang sanggup kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Kali ini aku akan share gimana Trik Membuat Kotak Script Di Dalam Postingan Blog Terbaru, silahkan ikuti tutorial langkah langkah berikut lengkap beserta gambarnya buat teman yang ingin menciptakan text box area yang keren pada article / posting di blogspot.

Trik Membuat Kotak Script Di Postingan :

1. Bikin kotak teks html menyerupai diatas ialah dengan tips masuk dashboard blog dan klik Entri Baru untk menciptakan article gres yang akan ditambahkan kotak script

2. Kemudian isi judul dan klik mode HTML

3. Setelah itu masukkan isyarat berikut, masih dalam mode HTML :

<div style="background-color: white; border: 3px #eeeeee solid; padding: 10px; text-align: left;">
.Masukkan Kode Script Sobat Disini.</div>

#Ganti goresan pena warna merah dengan script atau goresan pena yang akan teman masukkan dalam kotak

Jika sudah klik Mode Compose untk melihat hasilnya

4. Berikut adlah tampilan kotak script biasa tanpa scroll yang telah teman buat..

Jika teman ingin memakai scroll pada kotak script tersebut tinggal menambahkan isyarat yang berwarna biru menyerupai 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 Sobat Disini.</div>

#Untuk mengatur ukuran sanggup ubah angka height (tingi) dan widht (lebar) nya

Jika sudah sanggup klik Publikasikan untk mengepost article.. Selesai

5. Berikut adlah pilihan text box / kotak script yang banyak sekali macam bentuk dan warna yang sanggup teman gunakan supaya terlihat lebih keren :

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

<div style="border: 1px solid #444; padding: 10px; background-color: #eaeaea; 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 #2288dd; 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 #aaa; 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 #999; padding: 10px; t-align: left;">Kode Script Sobat 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;">Kode Script Sobat Disini</div>

<div style="border: 2px #610B38 dashed; padding: 10px; background-color:#57AA52; tex>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 #fff; padding: 10px; t-align: left;">Kode Script Sobat Disini</div>

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

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

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

#Jika ingin menambahkan scroll tinggal menambahkan isyarat height widht dan overflow menyerupai pada langkah no 4 di atas

Nah itulah gimana tips menciptakan kotak script di dalam postingan blog dengan gampang dan cepat.

Silahkan dicoba