Assalamualaikum , hari ini aku nak buat satu tutorial , bagaimana nak letak border dalam blog kita, kalau korang tak tahu border tu apa, boleh tengok di MENUBAR , SIDEBAR aku , di mana aku gunakan border jenis Example D untuk blog aku ni . Tapi kita kenali dulu jenis - jenis border yang ada ..
JENIS - JENIS BORDER
Di bawah ini jenis dan bentuk border yang ada ..
Example A
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px;
border-bottom-right-radius: 50px;
}
Example B
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
Example C
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
Example D
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
Example E
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
Example F
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 35px;
border-radius: 35px;
}
Sebenarnya, ada banyak lagi bentuk border yang ada , tapi di atas adalah bentuk - bentuk border yang selalu orang pakai .
CARA LETAK BORDER DI MENUBAR
Sekarang kita belajar cara nak letak border kat MENUBAR dulu ek .
1) Memula korang kena buat satu LINK LIST , caranya , korang masuk DESIGN >> PAGE ELEMENT >> ADD GADJET >> LINK LIST , masuk kan link yang korang nak dan simpan .
2) Kemudian masuk ke EDIT HMTL , jangan lupa klik expand widget templates dan kemudian tekan ctrl + f untuk mencari code html dibawah ini
.tabs-inner .widget li a {
3) Kalau dah jumpa , korang ambil code border diatas dan paste mengikut urutan seperti gambar di bawah .
4) Dan preview blog korang tu , kalau dah puas hati , boleh save .
CARA LETAK BORDER DI SIDEBAR (GADJET)
1) Untuk letakkan border dalam sidebar korang , korang cuma cari code html seperti di bawah ni
2) Kemudian masuk ke EDIT HMTL , jangan lupa klik expand widget
templates dan kemudian tekan ctrl + f untuk mencari code html dibawah
ini .
.sidebar .widget h2 {
3) Kalau dah jumpa , korang ambil code border diatas dan paste mengikut urutan seperti gambar di bawah .
4) Dan perview blog korang tu , kalau dah puas hati , boleh save .
KENALI CODE BORDER
Bonus untuk korang, jom kita kenali apa maksud di setiap code - code border tu .
Contoh korang nak gunakan border jenis D , korang akan guna kan code border seperti di bawah ni kan ? Sekarang kita ketahui code - code tersebut .
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
MERAH : Ini adalah code bagi background border , yang code #790101 , tu adalah code warna bagi maroon , korang boleh tukar mengikut warna pilihan korang di sini , pilih code warna kesukaan korang dan ganti kan dengan code #790101 itu .
OREN : 1px bermaksud ketebalan border korang tu , korang boleh tukar ikut ukuran kesukaan korang dan yang code #790101 adalah code bagi warna maroon , korang boleh tukar dengan warna kesukaan korang . boleh cari di sini http://www.computerhope.com/htmcolor.htm
HIJAU : Ini adalah code untuk bentuk border korang tu , code ini amat penting , jangan usik apa - apa ...
BIRU : Ini 'penutup' bagi code border , jangan lupa letak pula , nanti tak jadi border korang tu ..
Sebenarnya , border ini boleh digunakan di banyak tempat . Sesuai diletakkan sebagai bentuk blog , tak de la blog kita petak je . Harap korang dapat fahami apa yang aku tunjukkan ni , kalau tak faham, boleh tinggal komen ye . Aku bukan la pakar HTML , tapi aku suka mengkaji , dan hasil nya, ini lah template blog yang aku buat sendiri . Mula - mula pening juga, tapi aku gunakan google sebagai sumber rujukan aku , jadi aku mula faham maksud code - code HTML ni .. Huhu , Good Luck !
tags : border , bentuk , jenis , code , HMTL , apakah border , maksud border , sidebar , menubar
0 komentar:
Post a Comment