Memasang Code Box Pada Entri Blogspot

Pernah tertanya-tanya bagaimana menambahkan kotak kod pada tempat posting blogger anda? Sebenarnya terdapat dua cara untuk berbuat demikian, antara kaedah mudah yang sangat sesuai untuk permulaan dan juga kaedah lanjutan yang memberikan paparan kotak kod anda nampak lebih profesional tapi memerlukan sedikit pengubahsuaian pada kod template anda.

Kaedah yang mudah adalah dengan menambahkan kod dibawah pada editor posting anda

<textarea name="textarea" cols="40" rows="4" wrap="VIRTUAL">
YOUR CODE
</textarea>

Berikut adalah gambar dimana kod tersebut diletakkan :

Dan dibawah ini hasilnya :

http://www.cybernetic88.com/. Ini blog saya ;D

Untuk membuat kotak kod anda lebih profesional sila ikuti langkah2 dibawah :

Langkah 1 :

Pergi dashboard > Layout > Edit HTML dan muat turun terlebih dahulu template anda

Langkah 2 :

Carikan kod ]]></b:skin> dengan menekan Ctrl + F pada papan kekunci anda

Langkah 3 :

Letakkan kod dibawah sebelum kod ]]></b:skin>

.code {
background:#f5f8fa;
background-image:url(http://i142.photobucket.com/albums/r99/nilarimogard/30bmq7a.gif);
background-repeat:no-repeat;
border: solid #5C7B90;
border-width: 1px 1px 1px 20px;
color: #000000;
font: 13px 'Courier New', Courier, monospace;
line-height: 16px;
margin: 10px 0 10px 10px;
max-height: 200px;
min-height: 16px;
overflow: auto;
padding: 28px 10px 10px; width: 90%;
}

.code:hover {
background: #FAFAFA; background-image:url(http://i142.photobucket.com/albums/r99/nilarimogard/o7t4j9.gif);
background-repeat:no-repeat;
}

Lihat pada contoh gambar dibawah dimana kod diatas diletakkan :

Langkah 4 :

Savekan template anda

Langkah 5 :

Sekarang pergi ke Dashboard anda dan membuat posting baru di blog dan anda hanya perlu menambahkan kod dibawah

<div class="code">
YOUR CODE
</div>

Lihat hasilnya pada contoh gambar dibawah :

* Anda tidak boleh melihat kotak kod yang dibuat pada editor posting anda, jadi anda harus publish terlebih dahulu dan lihat posting anda di blog.