tutorial: buat border melengkung part 2

السلام عليكم

rase nak buat tutorial yang kedua pulak. tutorial nie sama shja macam tutorial yang first cuma agak berlainan daripada segi content tu gadget sahaja. ayie tidak tahu nak terangkan bagaimana but you all can see it later. hehe kenapa later ea? tengok lh dekat bawah nie yer.

tutorial buat border part 2

maaf, tutorial nie tidak panjng cuma ayie masukkan 3jenis brder sekali dalam satu entry. harap-harap korang tidak pening. kalo pening just ask me dekat comment box.

border 1

border 2

border 3

important note:

dalam border ini, kita dapat lihat bahawa gadget content and title sidebar telad diasingkan dan tidak dalam satu part. so, sekarang ayie nak terangkan plak pasal border-border tersebut.

border 1:

melengkung pada title sidebar sahaja dan empat segi pada gadget content.

border 2:

melengkung pada lingkaran bawah sahaja untuk gadget content buat title sidebar masih dalam kotak empat segi.

border 3:

melengkung pada pada semua kawasan tetapi title sidebar dan gadget content dipisahkan dengan warna.

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

h2 {

text-align:center;

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

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

background:none repeat scroll 0 0 #d8d800;

margin:0;

padding:5px 10px;

}

.sidebar .widget-content {

background:none repeat scroll 0 0 #fcf79e;

padding:5px 10px;

}

border 2

h2 {

text-align:center;

background:none repeat scroll 0 0 #d8d800;

margin:0;

padding:5px 10px;

}

.sidebar .widget-content {

-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 #fcf79e;

padding:5px 10px;

}

border 3

h2 {

text-align:center;

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

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

  background: #03ABFF;

}

.sidebar .widget-content {

-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 #9DD8E5;

padding:5px 10px;

}

penting untuk ingatan:

sekarang nak terangkan mengenai apa yang ayie higlightkan dekat code-code diatas.

code yang berwarna merah: code tersebut korang boleh tukar ikot cita rase korang sama ad nak melengkung tu mcm mane. kalo korang letak lagi besar no tersebut. maka lagi lengkung ah tempat yang melengkung itu.

code yang berwarna kunig: code tersebut adlah code warna untuk title sidebar. ayie rase lebih baik korang gunakan warna yang agak gelap sikit sebab bak pisahkan dengan gadget content.

code yang berwarna biru muda: code tersebut adlah code warna untuk gadget content. ayie sarankan gunakan agak muda sedikit suapa cintra degan title sidebar yang malap sikit supaya ad perbezaan.

• kalau dah siap, korang boleh tengok yang code dia macam gini.

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

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

SELAMAT MENCUBA

maaf yer sebb tutorial kali nie agak panjng dan kalo korang nak tengok border part 1, pergi saje dekat tutorial dekat atas itu yer. incya-Allah korang boleh gunakan juga. by the way, nantikan tutorial part 3 berkaitan dengan border juga. hehe banyak nie boder nak tunjuk dekat korang semua. see you all okay.