Cara Membuat Kotak Kode Script Html

Author : Oktavialei

Cara Membuat Kotak Kode Script Html. Kotak kode script ini saangat bagus di gunakan untuk posting yang menandai sebuah kode HTML.CSS atau JavaScrivt supaya tampilan posting lebih dinamis dan terlihat lebih profesional. temtunya untuk mengesankan tulisan artikel yang mnggunakan kode script, bisa terlihat lebih rapih dan simple.
Disini saya sediakan kotak script dengan tampilan yang berbeda, jadi sobat bisa pilih mana yang sobat suka, untuk cara memasangnyapun cukup sangat mudah sobat, silahkan lihat contoh dibawah


Berikut beberapa versi kotak code script yang bisa sobat gunakan sesuai selera dan keinginan..

• Demo :  Border Solid Tampil Kiri

<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;">Letakkan Kode disini……</div>

• Demo : Border Solid

<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;">Letakkan Kode disini…… </div>

• Demo : Border Dashed

<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;">Letakkan Kode disini……</div>

• Demo : Border Double

<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;">Letakkan Kode disini……</div>

• Demo : Border Outset

<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;">Letakkan Kode disini……</div>

Caranya :

• Sobat tinggal menaruh code yang ada di dalam kotak script tersebut di  menu tab HTML posting artikel 
• Kembali ke tab menu Compose dan lihat hasilnya..

Catatan style kotak bisa sobat rubah  :

• Mengganti ukuran sudut lengkungan : border-radius: 10px ada 3 ganti semua
• Mengganti warna background : background-color: #codewarna
• Merubah ketebalan border / garis tepi kolom : border: 4px