Membuat border style mengelilingi script code

kita akan membuat kotak Script yang menjadi bagian dari teks content (teks artikel) blog atau website. Tujuan pembuatan kotak mengelilingi script code ini adalah agar dapat memperjelas dalam membaca code tersebut karena ada efek highlight. Tentu saja ini menjadi lebih menarik bila dibandingkan latar belakang tulisan script polos apa adanya.

Caranya mudah. Anda hanya perlu menambahkan code CSS dan HTML di bawah ini ke dalam template, maka setiap kali ada posting yang akan ada di dalamnya script, maka script tersebut akan berada di dalam kotak.

Bagaimana caranya?

Anda dapat mengubah-ubah letter berwarna biru (dashed dan #e0ffff) dengan pilihan lain sesuai selera dan warna latar belakang website atau blog. Untuk pilihan selain “dashed” Anda bisa memilih diantara alternatif-alternatif dibawah ini (beserta contoh Border Style yang akan ditampilkan).

Agar kode tersebut berfungsi, maka script atau kode yang akan Anda posting pada halaman Source atau Sumber harus diapit dengan kode   <p class="alert"> dan </p>

atau seperti di bawah ini :

<p class="alert"> ISI / SCRIPT KODE DALAM KOTAK</p>

ISI / SCRIPT KODE DALAM KOTAK misalnya ini :

/* Alert */
.alert {margin: 10px 10px 10px 10px;
padding: 10px 15px 10px 15px;
line-height: 1.6em;color: #000000;
background: #e0ffff;
border: 1px solid #000000;
border-style: dashed }

Silahkan melihat hasilnya seperti Script yang pertama (diatas gambar Border Style) dengan pilihan “border-style: inset”   Dan jika Script tidak diapit dengan <p class="alert">  dan  </p>, maka hasil tampilan script akan sama seperti tampilan Script persis diatas, yaitu POLOS tanpa border style sama sekali.

Selesai.