Meletakkan Professional Code Box pada Blog

Untuk memberikan blog anda lebih ceria, ada satu kod html untuk 'code box' yang saya ingin kongsikan disini, ia digelar kotak kod profsional atau Professional Code Box, yang sesuai untuk di isi dengan kod-kod html, java, css dan sebagainya. Bukan apa, kalau main letak sama macam posting biasa, dikhuatiri bila pelawat berminat pada kod tersebut, mereka akan copy dan paste bukan sahaja code tetapi ter'copy' juga iklan atau ayat-ayat lain. Ini akan memberikan ralat pada pelawat tadi.

Caranya:
1. Sign In ke akaun blog anda > Design > Template

2. Backup dahulu blog anda dengan menekan butang Backup / Restore (Simpan skrip asal blog anda elok-elok, kalau berlaku ralat, boleh backup semula)

3. Pada bahagian Template tadi, klik pada Edit HTML > Proceed

4. Tekan butang F3 pada keyboard atau tekan Ctrl + F untuk ruang Find

5. Cari kod ini pada skrip blog anda

  ]]></b:skin>
6. Kemudian copy dan paste-kan kod di bawah, sebelum kod   ]]></b:skin>

.code { background:#f5f8fa; background-image:none; 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:none; background-repeat:no-repeat; }

7. Lihat gambar dibawah untuk pencerahan

Klik untuk besarkan gambar

8. Save Template untuk simpan dan selesai.

9. Untuk meletakkan kotak kod pada posting anda, perlulah meletakkan skrip ini pada HTML Tab :


<div class="code">
Letak kod anda di sini
</div>

Lihat gambar

Sila guna HTML Tab. 

Dan hasilnya akan keluar seperti di bawah:

Letak kod anda di sini

Perlu diingatkan, anda hanya boleh melihat hasil kotak kod ini pada Preview atau Publish terus, semasa membuat posting, ianya tidak kelihatan. Selamat mencuba Wassalam