tutorial: buat border melengkung part 1

السلام عليكم

alhamdulilah ayie dapat lagi nak coretkan sesuatu and lah nie ayie dah kire yakinlah nak buat tutorial untuk korang. no entry copy paste tutorial orang lain yer. ini alhamdulilah ayie try bljo sendiri bace-bace coding. kate orang try and error. huhu sebenarnya ad banyak jenis border tapi hari nie ayie nak tunjuk dua shje dulu. jom layan dekat bawah nie.

border melengkung 1

border melengkung 2

macam mane nak letak border nie dekat sidebar korang. firstly korang kne ilot step nie aw. one by one. hope fully korang dapat faham tutorial yang ayie nak buat nie. hukhuk

• korang try pergi dekat login blog ----> dashboard ----> design ----> edit html.

• korang tick [ expand widget templete ].

• tekan control serentak dengan F.

• korang try cari coding code ni, 

h2 { 

OR

 .sidebar .widget {

• kalau dah jumpa korang gantikan h2 { or .sidebar .widget { dengan code dekat bawah nie.

border 1

.sidebar .widget {

text-align:center;

-moz-border-radius:0 0 10px 10px;

-webkit-border-bottom-left-radius: 35px;

-webkit-border-bottom-right-radius: 35px;

background:none repeat scroll 0 0 #cccccc;

padding:5px 10px;

}

35px tu korang boleh gantikan dengan berapa yang korang suka sebb itu adlh untuk lengkung bawah berapa yang korang rase cantik. boleh diubah.

#cccccc tu adlah background sidebar tersebut. korang boleh pilih dekat SINI.

-------------------------------------------------------------------------------------------------------------

• border no dua nie same shje care naK apply macam border satu cuma nty korang akan dapat perbezaan pada border 2 sebab ad background berlainan di atas.

border 2

.sidebar .widget {

text-align:center;

-moz-border-radius:0 0 10px 10px;

-webkit-border-bottom-left-radius:10px;

-webkit-border-bottom-right-radius:10px;

background:none repeat scroll 0 0 #fff569;

border-top:10px solid #d8d800;

color:#000000;

letter-spacing:0;

margin:0.75em 0;

}

10 px itu adlh lengkung bawah border yang korang boleh tukar ikot rase korang.

#fff569 pula adlah warna background korang. korang boleh cari dekat sini.
solid pula tu korang boleh tukar kepada macam-macam. nak tukar link klik SINI.

#d8d800 pula adlah colour untuk border atas yg berlainan tersebut. kgn same dengan background plak. better yang lebih pekat sikit warnanyer.

kire lepas korang gantikan dia akan jadi macam dekat bawah nie.

• kalau dah siap korang preview dahulu. kalau tidak ad error baru korang save templete yer.

tutorial nie sesuai untuk templete designer and certain-certain templete sahaja. kalau ad kemuskilan sila beritahu kepada ayie, mane tahu ayie dapat menolongnyer nanti. 

SELAMAT MENCUBA