Cara Membuat Kotak Script di dalam Postingan Blog/Website

detikjam.com - Cara Membuat Kotak Script di dalam Postingan Blog/Website Pada kesempatan kali ini, saya akan membahas cara membuat kotak script di postingan blog/website.

Tutorial membuat kotak script di postingan blog ini saya buat sekadar latihan, sekaligus menyimpan arsip untuk saya jadikan referensi buat diri sendiri. Namun semoga juga bisa bermanfaat bagi siapapun yang ingin mempercantik blog-nya.

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.

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

Cara Membuat Kotak Script Di Postingan :

1. Bikin kotak teks html seperti diatas yaitu dengan cara masuk dashboard blog dan klik Entri Baru untuk membuat artikel baru yang akan ditambahkan kotak script
   
   
   
2. Kemudian isi judul dan klik mode HTML
   
   
   
   
3. Setelah itu masukkan kode 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 tulisan warna merah dengan script atau tulisan yang akan sobat masukkan dalam kotak
   Jika sudah klik Mode Compose untuk melihat hasilnya
   
   
   
   
4. Berikut adalah tampilan kotak script biasa tanpa scroll yang telah sobat buat..
   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 Sobat Disini.</div>
   
   #Untuk mengatur ukuran bisa ubah angka height (tinggi) dan widht (lebar) nya
   Jika sudah bisa klik Publikasikan untuk mengepost artikel.. Selesai
   
   
   
   
5. Berikut adalah pilihan text box / kotak script yang berbagai macam bentuk dan warna yang bisa sobat gunakan agar terlihat lebih keren :
   
   
Kotak Script sederhana tanpa lis border
<div style="background-color: turquoise; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 2px
<div style="background-color: ivory; border: 2px solid black; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan single-border solid 4px
<div style="background-color: #f3f3f3; border: 4px solid #999; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan double-border
<div style="background-color: lightcyan; border: 3px #FE0606 double; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan top-border
<div style="background-color: ghostwhite; border-top: 8px solid red; overflow: auto; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan left-border
<div style="background-color: #f3f3f3; border-left: 10px solid #2288dd; padding: 10px; t-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan dotted-border (garis titik-titik/dots)
<div style="background-color: #ffebcd; border: 3px Red Dotted; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan dashed-border (garis putus-putus)
<div style="background-color: palegreen; border: 5px #1780dd Dashed; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan inset-border (seperti tertanam pada halaman postingan)
<div style="border: 4px #02d144 inset; padding: 10px; background-color: #d5839f; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan outset-border (seperti keluar dari halaman postingan)
<div style="background-color: white; border: 3px #1780dd outset; padding: 10px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan ridge-border (seperti timbul)
<div style="background-color: #dde5d1; border: 3px Blue Ridge; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

Kotak Script dengan groove-border (seperti masuk ke dalam halaman postingan)
<div style="background-color: white; border: 3px Pink Groove; padding: 5px; text-align: left;"> Tulis script anda di sini..! </div>

#Jika ingin menambahkan scroll tinggal menambahkan kode height widht dan overflow seperti pada langkah no 4 di atasNah itulah bagaimana cara
membuat kotak script di dalam postingan blog dengan mudah dan cepat.Note :

• background-color (warna kotak script)
• border-color (warna garis border)
• border : (..)px (ketebalan garis border)
• text-align (posisi script).

Nah kira-kira seperti itu cara membuat kotak script sederhana di postingan blog/website selamat mencoba.