Cara membuat postingan kode html dalam kotak

, ,
Ping
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

7 comments:

Faried said...

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

Faried said...

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

terima kasih sebelumnya..dan salam kenal,

Niko HTC said...

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

mudo said...

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

media dagang said...

ok mas trim

Herma Putra said...

thank's,infonya

yun ayunda said...

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

Post a Comment

Gajah mati boleh meninggalkan gading, Harimau mati meninggalkan belang,Tetapi janganlah Anda pergi dengan meninggalkan SPAM komentarlah yang baik secara otomatis anda akan mendapatkan backlink dari link komentar Dofollow saya !

BackLink

BackLink !!!!