Cara membuat postingan kode html dalam kotak

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 bang germo 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>

Posted By Hendrik Arranger

Bagi rekan2 yg mau bertanya, atau yg mau menggunakan jasa saya, baik itu di blog atau apa aja deh dpt menghubungi saya, dan dpt jg dgn cara jd Donatur dan atau like Blog ini demi kemajuan Blog ini juga. contact me

Thank You