Membuat Kotak Script di blogger Terbaru

Membuat Kotak Script di blogger Terbaru

Kotak script atau sering disebut para blogger text box area adalah sebuah kotak yang di dalam nya dapat dimasukkan tulisan atau script code. 

 Text box area tersebut juga dapat ditambahkan fungsi scroll agar terlihat rapi dan juga teratur pada sebuah artikel di blogspot, wordpress, atau website. Tujuannya agar para pengunjung (visitor)  merasa nyaman saat sedang membaca artikel yang ada pada situs web tersebut. Untuk membuat kotak html blog kita hanya perlu menambahkan kode script ke dalam postingan artikel pada blog tersebut. Adapun yang dapat kita atur bentuk dan warna kotak script tersebut supaya tampilan nya terlihat keren dan bagus.

Pada artikel kali ini saya akan bagikan Tutorial Cara Membuat Kotak Script Pada Artikel Blog, silahkan kawan-kawan ikuti tutorial lengkap beserta gambarnya bagi kawan-kawan yang ingin membuat text box area keren pada artikel atau postingan di blogspot.

TUTORIAL CARA MEMBUAT KOTAK SCRIPT DI POSTINGAN :

1. Pertama untuk membuat kotak teks html dengan cara masuk ke dashboard blog dan klik Entri Baru untuk membuat artikel baru yang akan ditambahkan kotak scriptnya

2. Lalu isilah judul artikel seperti biasa kemudian klik mode HTML

3. Setelah itu copy kode di bawah ini lalu pastekan di dalam postingan mode HTML :

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

- Ganti tulisan warna merah dengan script atau tulisan yang akan kawan-kawan masukkan dalam kotak.

- Jika telah selesai klik Mode Compose untuk melihat hasilnya.

4. Berikut adalah tampilan kotak script biasa tanpa scroll yang telah kawan-kawan berhasil buat.

- Jika kawan-kawan 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 Disini.</div>

- Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya
- Jika sudah selesai silahkan klik Publikasikan untuk mengepost artikel.

- Selesai

5. Berikut ini adalah beberapa pilihan text box atau kotak script berbagai macam bentuk dan warna yang bisa sobat gunakan agar terlihat lebih baik dan juga keren tentunya :

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

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

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

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

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

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

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

Nah, kita sudah selesai membuat kotak script sederhana di dalam postingan blog dengan mudah. Semoga bermanfaat, sekian dan terima kasih.