We have new forums at NiteshKothari.com
TopBottom

Membuat Border / Kotak Pada Posting

Posted by madridista at Senin, 04 Januari 2010
Share this post:
Ma.gnolia DiggIt! Del.icio.us Yahoo Furl Technorati Reddit

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:
<div style="border:1px #ff0000 solid; padding:10px; background-color:#000000;">Tulisan ber-border. Ukuran border 1px dan jenisnya solid.</div>


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:
<b:skin><![CDATA[/*

dan diakhiri dengan:
]]></b:skin>

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:
<div class="border">isian</div>

5 komentar:

Andree Arief Pratama mengatakan...

Great Information !

[b]D[/b][color=#800000][b]N[/b][/color] >>> http://theblognews.tk

AQUA mengatakan...

thanks tipsnya..
ini yang q cari2.
bermanfaat, jd lebih rapi..

KMKO Sipil Unhas mengatakan...

kalo mau pasang di widget gimana yaaa??

Kunjungi yaaa http://kmkosipil.blogspot.com/

[Kehidupan Mahasiswa, Kisah Inspiratif, Musik Rohani, Jokes Mahasiswa, Artikel, Ebook Gratisan Teknik sipil, Bahan-Bahan Kuliah, Database dan Event KMKO Sipil Unhas Makassar]

Poskan Komentar