Cataloged Autobiography
BERKENAAN SAYA
Hello. Saya adalah self-taught web designer yang banyak menghabiskan masa meneroka penggunaan CSS dan HTML. Blogging hanyalah hobi. Teruskan membaca..
The Readable Journal
MENEROKA ARTIKEL
Teroka artikel berhubung dengan tutorial, contoh dan penggunaan CSS dan HTML dalam web design di ruang ini. Web design menyeronokan. Ke tutorial...Klik sini
Astrolab Tool
KATEGORI ARTIKEL
Suatu sistem yang berfungsi untuk membantu menjelajahi topik-topik terkait dan menyenaraikan pelbagai sub-bahagian artikel...Klik sini



BINA KOTAK BAHAGIAN 3
May 11, 2009
Posted by: Fauzie


Untuk bahagian ketiga ini, kita akan membina kotak dengan menggunakan "Cascading Style Sheet" atau CSS.

Jenis kotak dipanggil "fluid Box Model". Dalam contoh ini beberapa kotak kecil akan dibina di dalam sebuah kotak besar.

Kod-kod CSS dan HTML akan diasingkan dengan meletakkan kod-kod CSS di bahagian dalam rangka HTML iaitu di antara <head> dan </head>.

Copy dan paste kod-kod CSS di bawah ini ke dalam rangka html blog atau website dengan pergi ke Dashboard->Layout->Edit Html->Klik kotak Expand Widget Templates dan cari <head>. Untuk memudahkan anda mencari kod, apa yang perlu anda buat ialah tekan pad Ctrl dan "F". Kotak kecil akan muncul di bahagian bawah screen anda dan taipkan </head> di dalam kotak kecil ini. Anda akan ditunjukkan secara langsung ke bahagian </head> ini.

Sila letakkan atau paste kod-kod CSS ini betul-betul di bahagian atas kod </head> dan kemudian klik PREVIEW. Jika tiada apa-apa masaalah, barulah anda klik SAVE TEMPLATE.

Nota: Jangan klik SAVE TEMPLATE sebelum anda klik PREVIEW. Jika terdapat sesuatu masaalah seperti "your html cannot be parsed" apa yang anda perlu buat ialah klik CLEAR EDITS. Masaalah html tidak boleh "parsed" kerana kemungkinan besar terdapatnya kod-kod yang tertinggal sewaktu diletakkan atau "paste".

Kod CSS
<style type='text/css'>

.box {
width: 170px;
border: solid red;
border-width: 8px 3px 8px 3px;
background-color: blue;
}

.box ul {
margin: 0px;
padding: 0px;
padding-top: 30px;
}

.box ul li {
margin: 1px 2px 2px 2px;
background-color: yellow;
list-style-type: none;
padding-left: 2px;
}

</style>


Kod-kod html untuk kotak ini pula ialah seperti berikut:

Kod HTML
<div class="box">
<ul>
<li>Isi kotak 1</li>
<li>Isi kotak 2</li>
<li>Isi kotak 3</li>
</ul>
</div>


Dua set kod di atas adalah berasingan bila di masukkan dalam template. Kod set pertama ialah kod CSS dan set kod kedua ialah kod HTML.

Untuk kod set pertama telah diterangkan dimana hendak dimasukkan, iaitu di atas kod </head>.

Di bahagian mana pula hendak diletakkan kod HTML di atas? Jika dilihat "width" atau lebar kotak ini ialah 100px. Maka ianya sesuai untuk diletak di bahagian "sidebar". Anda juga boleh meletakkan kotak ini di bahagian dalam blog post.

Bagi bahagian sidebar, anda hanya perlu masukkan kod HTML ini bahagian Page Element blog anda. Jika anda hendak letakan kotak ini di bahagian blog post, anda hanya perlu paste kod HTML ini di bahagian Edit Post->Edit Html

Nota: Pastikan anda dalam Edit Html mode bukan dalam mode compose dan "compress" kod-kod Html tersebut iaitu rapatkan di antara satu dengan lain.

Berapa banyak kotak kecil yang anda perlu tergantung berapa banyak yang anda perlu. Hanya taipkan sahaja <li> ... </li>. Contoh di atas mempunyai 3 baris (isi kotak 1 hingga 3).

Untuk mendapatkan lebar, warna background, jenis border iaitu solid, dashed atau dotted, anda boleh tukarkan mengikut kehendak anda.

Di bawah ini ialah contoh kotak yang menggunakan kod CSS dan Html di atas.

Nota: visual kotak ini lebih baik jika diletakkan di bahagian sidebar.

  • Isi kotak 1
  • Isi kotak 2
  • Isi kotak 3


Untuk membina kotak yang mempunyai saiz yang lebih besar atau kecil dan mempunyai warna yang berlainan, anda perlu mempunyai satu lagi set kod CSS tersebut dengan menyalin (copy) dan paste di bahagian bawah kod CSS yang pertama tadi (letakkan atau paste di bawah </style>). Kemudian tukarkan kod .box { kepada .box2 {, .box ul { kepada .box2 ul { dan .box ul li { kepada .box2 ul li { bagi memberitahu browser kod-kod kedua ini adalah merujuk kepada kotak yang berlainan. Kemudian tukar pixel untuk lebar (width), warna border dan warna background-color. Dan pastikan juga di bahagian kod htmlnya iaitu di <div class="box"> ditukar kepada <div class="box2">.