Friday, June 17, 2011

Tutorial : Bentuk Border Dan Cara Nak Letak Border Dalam Menubar Dan Sidebar



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


Top