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


11 komentar:

dita_disini 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?

akhsa said...

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

Biru 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..

ashim 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..

Klinik Pembesar Penis said...

Www.klinikPembesarpenis.Com
Pusat Obat Kuat Sex Pria - Obat Alat Pembesar Penis - Alat Bantu Sex Pria Dan Wanita - Obat Pelangsing Badan Herbal, Dll...


Tersedia Juga :

Obat Kuat Sex Pria.
Obat Pembesar Penis.
Alat Pembesar Penis.
Minyak Pembesar Penis.
Alat Bantu Sex Pria.
Alat Bantu Sex Wanita.
Obat Pelangsing Badan.
Obat Penggemuk Badan.
Obat Penyubur Sperma.
Selaput Dara Buatan.
Pembesar Payudara.
Kesehatan Kecantikan.
Vimax Capsule Canada.

Kepuasan Customer Adalah Perioritas Bagi Kami, Terima Kasih
Selamat Berbelanja

selaput dara said...

very vey nice....
selaput dara perawan
penyubur sperma
penyubur sperma
obat kuat pria
pemutih wajah
perangsang wanita
pembesar alat vital
pelangsing badan herbal
pembesar penis herbal
kondom antik
obat penggemuk
obat diabetes
obat tidur
obat kuat ampuh
obat kuat
alat pembesar payudara
obat pembesar alat vital
alat sex wanita
pembesar penis permanen
obat kuat pria
alat seks pria
alat terapi penis
penis silikon
obat pelangsing
obat jerawat
ring penggeli
alat bantu pria
obat kuat tahan lama
pembesar penis alami
alat bantu seks wanita
obat tidur
minyak pembesar alat vital
pelangsing tubuh
obat pembesar penis

selaput dara buatan said...

very vey nice....
penghilang tatto
obat tidur
pembesar penis terbaik
obat jerawat
alat onani
alat bantu antik
alat bantu seks pria
alat seks wanita
penis antik
kondom antik
obat kuat pria
obat kuat seks pria
obat pelangsing badan
obat perangsang
obat penyubur sperma
minyak pembesar penis
obat pembesar alat vital
alat pembesar penis
pembesar penis permanen
obat pembesar penis
pemerah bibir

pembesar pantat
pemutih wajah
perapat vagina
alat pembesar payudara
peninggi badan
selaput dara perawan


jajat baehaqi 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