Cara Membuat Text Box/Script Box Untuk Kode HTML di blog/website

dalam membuat blog yang banyak bahasa pemrograman memang cukup sulit

tapi jika ada niatan pasti ada saja jalan untuk menyelesaikannya

selama kita masih berusaha kita akan mendapatkan yang kita niatkan

dan buka kebetulan kalian masuk ke blog ini

karena blog ini tempat berbagi ilmu yang sselalu bermanfaat

 

 

berikut adalah kode script untuk membuat kotak script atau text box

yang biasanya diguuankan untuk berbagi kode script juga

 

dalam memasang kode script di bawah ada triknya

triknya adalah sebagai berikut ?

1. masuk ke postingan

2. ubah, mode penulisan menjadi HTML, agar dapat memasukan kode htmlnya

3. kemudian masukan kode html di tempat yang di inginkan

4. ubah kembali ke mode penulisan,

5. dan masukan kode html atau text yang ingin dimasukan

 

1. kode Script kotak Border-Dotted

kotak ini berbentuk kotak yang menyesuaikan isi tulisannya, dan memiliki garis batas atau berder titik putus-putus atau border-dotted

<div style="background-color: #ace5f4; border: 2px #0180cf dotted; padding:10px; text-align:left;">MASUKKAN KODE HTML DISINI</div> 

CONTOH KOTAK BORDER-DOTTED

2. Kode Script Kotak Single-Border

kode ini memiliki batas garis tepi/border satu saja

<div style="background-color: #ace5f4; border: 3px solid #0180cf ; padding: 10px; text-align: left;">
MASUKKAN KODE HTML DISINI </div>

CONTOH KOTAK SINGLE-BORDER

3. Kode Script Kotak Vertikal dan Horizontal Scroll

kode ini memiliki vertikal scroll dan horizontal scroll untuk melihat test yang panjang 

dan memakan ruang sedikit agar tampilan lebih rapih, apalagi jika dilihat di perangkat mobile

 

<div style="border: 2px solid #0180cf; height: 70px; overflow-x: scroll; overflow-y: scroll; width: auto;">
<div style="width: 1000%;">
MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA</div>
</div>

CONTOH

KOTAK

SCROLL

VERTIKAL

DAN

HORIZONTAL

4. Kode Script kotak Vertikal Scroll

kode ini sama dengan yang sebelumnya, yang membedakan cuma yang ini tidak memiliki horizontal scroll bar

 

<div style="background-color: white; border: 2px solid #0180cf; height: 70px; overflow: auto; padding: 5px; width: auto;">
MASUKKAN KODE HTML DISINI
DISINI JUGA
SAMA DISINI
KALO ADA DISINI JUGA
</div>

 

CONTOH                                                                                                                                              KOTAK                                                                                                                                               VERTIKAL                                                                                                                                              SCROLL                                                                                                                                                                          

5. kode Scipt Kotak Double-Border

kotak ini memiliki tampilan border yang ganda

 

 <div style="background-color: #ace5f4; border: 3px #0180cf double; padding: 10px; text-align: left;">
MASUKKAN KODE HTML DISINI </div>

CONTOH KOTAK DOUBLE-BORDER

Share this post