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

css html tutorial tutorial blog 9/30/2012 09:45:00 am