Memasang Code Box

Kod akan lebih menarik jika diletakkan dalam code box.

Dulu aku ada ajar tentang bagaimana nak membuat alert message box, hari ini aku akan ajar tentang bagaimana nak memasang code box pula. Code Box kebiasaannya sesuai hanya untuk mereka yang ingin menampilkan kod diblog mereka, ianya amat berguna untuk mereka yang menulis tentang tentang Css, Html, Php dan sebagainya.

Hanya blog yang menulis tentang kod saja dikhususkan.

Bagi mereka yang berjinak-jinak nak tulis tentang blog Css, Html, Php dan sebagainya bolehlah menggunakan kod ini. Tapi ingat tolong jangan ambil bulat-bulat tutorial yang ada dari blog ini. Yang itu olah sendiri ikut kretiviti kamu.

Dan aku tahu semenjak dua menjak ni orang lebih banyak guna Syntax Highlighter, tapi aku rasa kurang berkenan sebab ia mungkin memberatkan blog kamu kerana terlalu banyak javaskrip digunakan. Kalau Wordpress aku tak kisah sangat tapi kalu Blogspot ia mungkin nampak pelik.

Memasang Code Box

01. Pilih Template > Edit Html.

02. Cari kod ini :

]]></b:skin>

03. Tambahkan kod ini di atasnya (pilih salah satu) :



Posisi Kiri

pre {

background:transparent url(http://tinyurl.com/d8q3fh) no-repeat scroll 0 0;
padding-left:12px;
margin:10px 0;

}
pre code {

background-color:#F9F9F9;
border:1px solid silver;
color:#333;
display:block;
min-height:63px;
word-wrap:break-word;
overflow:auto;
padding:5px;
text-align:left;
white-space:pre;

}

Posisi Atas (alternatif)

pre {

background:transparent url(http://tinyurl.com/crfps7) no-repeat scroll 0 0;
padding-top:12px;
margin:10px 0;

}
pre code {

background-color:#F9F9F9;
border:1px solid silver;
color:#333;
display:block;
min-height:63px;
word-wrap:break-word;
overflow:auto;
padding:5px;
text-align:left;
white-space:pre;

}

04. Pilih Save.

05. Pilih Setting > Formatting > Post Template.

06. Tambahkan kod ini :

<pre>

<code>

Kod-kod yang ingin dimasukkan ke dalam Code Box.

</code>

</pre>

Kod ini akan tertera setiap kali kamu membuka New Post.

07. Pilih Save.

Oh ya, sebelum nak letak kod dalam code box sila encode dulu di web Centricle, kalau tidak sampai esok pun tak akan jadi.