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

23 comments:

sekolat setobery said...

huh..terbaiklah..memang dah lama carik toturial nie....thanks yer bg tutorial nie....

terbaikkkk

cik mas said...

lama dah cari tuto ni.. thnks sangat2 sebab sudi jugak tlg sy... jasamu di kenang :)

thnks sangat2 tau! huhu.. (--")

զιɛℓαʓмαи said...

xjmpe pown code yg kena cari 2 ==' huhu

Tengku Nizam said...

@զιɛℓαʓмαи tak jumpa ke ? yg mane tak jmpe? sidebar ke menu bar? de step tertinggal ni kot.. klau susah , biar sy buat kan, lain template, lain coding, tu yg susah tu, huhu

Bizstudent said...

terbaik!!!

Siti Rahmah Kamarudin said...

dah lama cari artikel tentang buat side bar ni...dah jumpa ni boleh la apply plak kat blog...mekasih ya

hana said...

terbaik la..
leh try pasni...
=D

cik mas said...

BRO.. DAH CUBA.. X BOLEH. CODE YANG KAMU BAGI TU SY CARI TAK JUMPE. LPS TU SAYA TIRU BALIK AND LETAK DLM eDIT HTML TU. LPS TU XDE APE RESPON JUGAK. MCM MANA YE?

yana :)) said...

Salam bro.. dah cuba.. jadi ^^ tapi utk yg sidebar punya je yg tak jd.. tak jumpa plak kod dia.. help me please ? :)

Fad said...

salam..waaa...cikgu nak tanya ni...pnt nak wat tp cnfius...cikgu fad wat feed kat atas entry...nak wat border situ tp xtau..sama ke cara yang ni?

ketawariang said...

assalam...

singgah sini tengok tutorial...
thanks tau...dah jadi da... :)

aidajusoh said...

thanx utk tutorial..da jd :)

_________________________
I added cool smileys to this message... if you don't see them go to: http://e.exps.me

ziahSu said...

trima kasih for tutorial...
sy suka...always rujuk kat u punyer blog..
http://www.PakarPromosi.com/hop.php?ref=ally

Zainatu Asma said...

xjumpa pun code sidebar.widget h2..xleh buat la klo mcm ni...

Zainatu Asma said...

xjumpa pun code sidebar.widget h2..xleh buat la klo mcm ni...

Zainatu Asma said...

xjumpa pun code sidebar.widget h2..xleh buat la klo mcm ni...

Zainatu Asma said...

xjumpa pun code sidebar.widget h2..xleh buat la klo mcm ni...

Zainatu Asma said...

xjumpa pun code sidebar.widget h2...xleh wt la cmni...:(

homestay Qaseh said...

agak rumit..buat xjadi pon...sadis..

ifsha said...

kenapa x dea yea kod tersebut

mat dewa said...

salam tengku...sy ni baru jer seminggu main blog...memang buta lg lah....tanya ckit........sy dh wat border mcm yg tengku postkan.....menjadi...jd nk mintak tolong tengku ckit lah......border sy pendidikan,sukan dan kerjaya....jadi bagaimana nk masukkan maklumat2 dalam border tu ehhh......

princess rocker said...

x jmpe pm code tu

eitcha,IM said...

thanks...info yang sangat berguna :D