-->

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>

Cara membuat postingan kode html dalam kotak

Cara membuat postingan kode html dalam kotak
  1. matursuwun mas udah berbagi gratis ilmunya..
    saya lagi nyari-nyari cara untuk menampilkan kode dalam postingan.

    kalau sempat, mampir ke blog saya juga..
    http://tempat-inspirasiku.blogspot.com

    ReplyDelete
  2. saya juga sudah pasang link + follow mas,
    ditunggu konfirmasi baliknya ya..

    terima kasih sebelumnya..dan salam kenal,

    ReplyDelete
  3. makasi yaa...
    jgn lpa kunjung blk & join this site
    http://nikoselex.blogspot.com/

    ReplyDelete
  4. Terimakasih mr M Mukhlis, dengan informasi ini menambah semangat untuk terus mencari ilmu dan sekarang ilmu bertambah dengan membaca dari informasi blog M mukhlis ini. Thanks gan semuanya Encoded Text/HTML JavaScript

    ReplyDelete
  5. Asslmlkm..
    Makasih infonya, Gan..
    kapan-kapan mampir yah ke blog ane..

    ReplyDelete