Membuat Border

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:#F3F2E8;">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:#F3F2E8;
Warna latar belakang. 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:#F3F2E8;

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:#F3F2E8; }

Langkah terakhir adalah memanggil elemen CSS border ini melalui tag div. Yaitu:
<div class="border">isian</div>

-- Keliatannya ribet tapi tidak loh --

Lihat tutorial lainnya di Azzahrah Design


8 komentar:

fairyteeth said...

hai, makasi ya udah mampir... tips tentang bordernya bagus juga... saya juga pas mo ngepost yang tutorial itu, kebingungan gimana ya bikin kotak (hehe, istilah nya...) tapi ternyata disini ada caranya bikin kotak...

skin/templatenya bagus2, kemaren pas dita ngoprek template blog dari 2 kolom menjadi 3 kolom, coba dita udah tau blog ini, mungkin gag jadi ngoprek, tapi pake template siap pakai yang disediakan di sini...

hehe, senang berkenalan dengan anda...

oiya, mau tukeran link?

Rini said...

@dita
Sama-sama. Aku mau tukeran link, tapi blognya dita yang mana diletakkan di sini?

Anonymous said...

Jzakillahu khoiron. tar kalo udah saya buat, tak pamerin deh :) btw, script utk blog ini kayak apa mbak? boleh liat? :)

Anonymous said...

RINI,
minta izin copy artikel kamu ke blog saya,ya ..

Selamburb said...

saya dari malaysia..
saya benar2 tertarik pada tutorial yg kamu berikan..
Bagaimana buat border untuk image..
dan bagaimana buat post comment seperti kamu..maksud saya apabbila diklik terus terpapar seperti blog kamu ini?

endopicky said...

hello rin,thanks for tipsnya ..
aku suka dg tips yg km berikan,jadi nambah ilmu nih soalnya

aq pasang tuh linkmu..

MUTTASIM said...

AssalamuAlaikum..
salam kenal buat mbak rini..terimakasih template yang islami dah kupakai di blog saya..
Subhanallah...bagus banget.semoga jadi amalsoleh buat mbak rini dengan template" yang bernuansa islami.mohon ijin menambahkan blog anda di blogroll saya..
Syukron..

Kang Haqie Zakaria said...

assalamu'alaikum Wr. Wb... terima kasih ilmunya mudah-mudahan bisa mempraktikannya ...maklum newbie banget....salam...semoga sehat selaltu....dan klo berkenan saya mau bikin kolom komentar ,,tpi belum bisa...

-- -- --

Copyright © 2008 - Free Islamic Blogger Templates - powered by Blogger