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;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQlTji9ACtY0DoA1bOe-MM4OfN70vNpCe2WOLyaeoz-wkaqoGdFDMjImQGbgz1ywZiayWRMVqYmVtKLTTwl0OQvCbuoW4rZqGZ3plW8aMbqUXHOnE4YO5QhR-hp-ViVwMHF2SYY-XMag/s400/xx.jpg)
Example B
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 50px 25px;
border-bottom-right-radius: 50px 25px;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAAzpw8GsJBRe4BzBhZgqChHLjXicYzsZXhJPOpbexyp97g_jLS-s3Qlv9kOMuYGPUeL0uPiaRUn9qv6BPc6a12wc3_KSDq53G6j-FY2FHbzBYyIFUwZyR3G6EDyrdrcj2WarBYtBX3g/s400/xxx.jpg)
Example C
background: #790101;
border: 1px solid #790101;
-moz-border-radius-bottomright: 25px 50px;
border-bottom-right-radius: 25px 50px;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglsnH6TXrZ67TKGlfiT2z4U_nHuPYK7qQCwxe3CUrhTF4U_jHJm8KYTzpHzo4-i_dPKVtiish-YGZ8x8vFfnAoNIJWKY0BoNxUzlDmCZLmVyNUEgA-0Jxh4oWGyKNeeERBKPkRLexiDw/s400/xxxxx.jpg)
Example D
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 1em 4em 1em 4em;
border-radius: 1em 4em 1em 4em;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi3Qu1nbjDD4gDal7xWpHmt_LE_9LbgqihR4BVC2bPqqk8qqPHgyD0241j0pgn7M7jvfbKQsSrObFBK9W9bi0HFpLXcs0jlh0Xv0qqhG0z25mrPRBeQW_XvPOJoQxAFDn8ZxVkUTMmzTQ/s400/xxxxxx.jpg)
Example E
background: #790101;
border: 1px solid #790101;
-moz-border-radius: 25px 10px / 10px 25px;
border-radius: 25px 10px / 10px 25px;
}
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqA2CDTKJQOZAtYnmwQpLYxqAwQEye9fDtzbIOWIoM2151xCnYLmranTkWwMk3zLUdyb6MB4k__2JhD7avTP1ehtESpjPDd5Rjvd8s6wT7-bO7NFXpArgwGk4CyfnvsXWGN7_tLI3LYQ/s400/xxxxxxx.jpg)
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