Latest News
Sunday, September 30, 2012

Cara Buat Border Style Di Blog

Berikut Tutorial ataupun cara buat border style yang menarik di blog ia menggunakan kod CSS (HTML) yang simple dan mudah di fahami. Lihat beberapa contoh Boder style seperti di bawah :

Penerangan ringkas mengenai border

Jenis-jenis boder: (Border Style)


border-style: dotted;
border-style: dashed;
border-style: solid;
border-style: double;
border-style: groove;
border-style: ridge;
border-style: inset;
border-style: outset;

Definasi:
Boder-boder ini boleh di set kepada beberapa jenis boder mengikut kesukaan masing-masing.

a)dotted- Ini akan mewujudkan sempadan dengan garisan bertitik.
b)dashed- Ini akan mewujudkan sempadan dengan garis putus-putus.
c)solid- Ini akan mewujudkan sempadan dengan garis pepejal.
d)double- ini akan mewujudkan sempadan yang mengandungi garisan kembar
e)groove- Ini akan mewujudkan sempadan yang akan kelihatan seperti alur.
f)ridge- Ini akan mewujudkan sempadan yang akan kelihatan seperti rabung.
g)inset- Ini akan mewujudkan sempadan dengan garis mencari sisipan.
h)outset- Ini akan mewujudkan sempadan dengan garisan mencari permulaannya.

Contoh Boder dotted:
<div style="border-width: 2px; border-style: dotted; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Boder dashed:
<div style="border-width: 2px; border-style: dashed; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border solid:
<div style="border-width: 2px; border-style: solid; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border double:
<div style="border-width: 4px; border-style: double; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border groove:
<div style="border-width: 4px; border-style: groove; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border ridge:
<div style="border-width: 4px; border-style: ridge; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border inset:
<div style="border-width: 4px; border-style: inset; border-color: red; "> testing border style</div>

Hasilnya:

testing border style



Contoh Border outset:
<div style="border-width: 4px; border-style: outset; border-color: red; "> testing border style</div>

Hasilnya:

testing border style

*Cuba lihat bagaimana saya membuat border dengan menggunakan jenis Boder Double. Kodnya Boder Double ini saya ubah sedikit mengikut kesukaan saya. Perhatikan kod asal dengan kod yang ubah.

Ini Kod Asal :

<div style="border-width: 4px; border-style: double; border-color: red; "> Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..</div>


Hasilnya :
Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..

Ini Kod Yang Telah Di Ubah :
<div style="border-width: 20px; border-style: double; border-color: green; "> Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..</div>


Dan Hasilnya :
Hai Semua.. Selamat datang ke SilenceBlogz.. jangan lupa komen ok..

Apa yang telah di ubah?
  1. Saiz daripada 4px kepada 20px
  2. Warna "red" kepada "green" ( sila rujuk HTML Color Code kalau tak tau nak pilih color )
Contoh terbaik jenis boder yang digunakan di blog iniseperti gambar di bawah:
Jenis Boder : SOLID ketebalan 1px
Nota: CSS - HTML memang menyeronokkan jika anda mempunyai kemahuan ingin memcuba di dalam pembikinan Website, Wapsite atau pun Blog. Selamat Mencuba.

*Nanti kita belajar macam mana nak buat tulisan macam ni pulak... hmmm... macam mana buat ni ye???

=> Contoh tulisan Menarik ni..ngaaaa~~
=>Wow ! tulisan ni pun Menarik jugak..

INCOMING SEARCH TERM :

Cara Buat Border Style Di Blog, html,css, boder, cara buat border solid, dotted, dashed, double, groove, rigde, inset, outset
  • Blogger Comments
  • Facebook Comments

9 comments:

  1. border untuk gambar ke?yang shadow pny xde bro?

    ReplyDelete
  2. @Mk Syahir yang shadow tu Inset dgn outset.. ce try buat 20px ke baru nampak shadow.. ni bukan boder image.. gambar print screen tu tak guna image pon.. guna background color ni #ffff00 je

    ReplyDelete
  3. owh cmnie rupanya nk buat...kalau kita masukkan KOD HTML dlm border tu boleh x? sebab ada kod html biasa bila kita letak dlm post entri dia akan bertukar.. contoh kita letak kod bila publish dia jd kod tu hilang...cmne tu? hehehe.

    ReplyDelete
  4. pening kalo edit belog nih hihih

    ReplyDelete
  5. @Zul De Alexis masuk jek apa saje dalam kod boder tu x kesah... nak masuk kod online ke... nak sukkan shoutbox ke...

    ReplyDelete
  6. @zila manaf tak semestinya guna kod ni wat edit belog... nak buat entry pon blh guna kod2 boder ni..

    ReplyDelete
  7. terima kasih atas info ini...

    salam ukhwah dan salam perkenalan utk semua blogger 's

    ReplyDelete

Sebarang Komen yang tidak berkaitan dengan artikel / SPAM akan Di PADAM. Terima Kasih.

Item Reviewed: Cara Buat Border Style Di Blog Rating: 5 Reviewed By: potia casadelarossa