Cara Membuat Kotak Pada Postingan

Biasanya kalo kita menuliskan tentang tutorial blog maka akan banyak kode script , php ,html atau kode xml yang kita tuliskan di didalam postingan kita jika kita mengimginkan code-code tersebut berada didalam kotak maka akan keliatan lebih menarik ,lebih cantik,lebih sedap dipandang mata dan lebih rapi,untuk cara membuatnya ini ada beberapa kode yang saya ulas :
Cara membuat postingan kode html dalam kotak 
Contoh tampilan yang akan dihasillkan akan seperti ini :

Isi dengan tulisan anda disini

Untuk variasi kode penulisannya sebagai berikut :
1. penulisan untuk tampilan Dashed Border

<div style="border: 2px &lt;span style=">#FF0000 solid; padding: 10px; background-lt;span >#FFCC00</span>; overflow: auto; height: 50px; width: 300px; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span> </div>

2. tampilan Dashed Border

<div style="border: 2px &lt;span style=">#FF0000 dashed; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span> </div>

3.tampilan Border dengan scroll, lebar dan tinggi

<div style="border: 2px &lt;span style=">#FF0000 solid; padding: 10px; background-lt;span >#FFCC00</span>; overflow: auto; height: 50px; width: 300px; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span> </div&gt


4.untuk tampilan Solid Border

<div style="border: 2px &lt;span style=">#FF0000solid; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

5.untuk tampilan Ridge Border

<div style="border: 2px &lt;span style=">#FF0000 ridge; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

6.tampilan Groove Border

<div style="border: 2px &lt;span style=">#FF0000 ridge; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

7.tampilan Inset Border

<div style="border: 2px &lt;span style=">#FF0000 inset; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

8.tampilan Outset Border

<div style="border: 2px &lt;span style=">#FF0000 outset; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

9.tampilan Double Border

<div style="border: 2px &lt;span style=">#FF0000 double; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>

10.tampilan Dotted Border

<div style="border: 2px &lt;span style=">#FF0000 dotted; padding: 10px; background-lt;span >#FFCC00</span>; text-align: left;"&gt; <span >Masukkan tulisan anda disini</span></div>