Membuat Border / Kotak Pada Posting

Border dapat dibuat pada tulisan dan gambar. Contoh pada tulisan adalah:
Tulisan ber-border. Ukuran border 1px dan jenisnya solid.

Membuatnya tidaklah susah.

Ada 2 cara pembuatan, yaitu tidak menggunakan CSS dan menggunakan CSS. Keduanya sama mudahnya. Saya akan mengulas kedua.
1. Tidak menggunakan CSS.
Keuntungannya adalah, kita dapat membuat border yang kita sukai dan berbeda-beda untuk tiap kotaknya.
Kekurangannya adalah, kita harus mengetik code untuk tiap kotak. Ini memakan waktu dan tenaga.

Cara membuatnya:
Untuk kasus tulisan dalam kotak yang di atas. Codingnya adalah:

Tulisan ber-border. Ukuran border 1px dan jenisnya solid.

border:1px #ff0000 solid;
1px –> ukuran border
#ff0000 –> warna border, terdiri dari 6 digit angka
solid –> tipe border, untuk bergaris putus-putus adalah ‘dashed’, titik-titik ‘dotted’

padding: 10px;
Padding adalah ukuran jarak antara text dan border

background-color:#000000;
Warna latar belakang hitam. Jika tidak ingin mengubah latar belakang warna, hapus saja.
2. Menggunakan CSS.
Keuntungannya adalah lebih mudah menggunakannya.
Kekurangannya adalah semua kotak sama.

Cara membuatnya:
Perhatikan kembali coding isi tag style yang di atas. Yaitu yang berisi:

border:1px #ff0000 solid; padding:10px; background-color:#000000;


Copy-lah bagian itu kemudian nanti akan diletakkan (paste) di bagian CSS. Masuklah ke bagian ‘Edit HTML’ pada layout. Perhatikan seluruh HTML yang ada. Bagian CSS diawali dengan tag coding:


dan diakhiri dengan:

]]>


Tepat di atas akhiran CSS ini, buatlah elemen baru CSS dengan mengetik:

.border {


Kemudian hasil copy-an tadi letakkan (paste) setelahnya. Akhiri dengan tanda tutup:

}


Hasilnya adalah:

.border { border:1px #ff0000 solid; padding:10px; background-color:#000000; }


Langkah terakhir adalah memanggil elemen CSS border ini melalui tag div. Yaitu:

isian





Bookmark and Share
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: