Tutorial: Buat Border Melengkung - 2

Tutorial: Buat Border Melengkung - 2

السلام عليكم

Sambungan Buat Border Melenkung - 2. straight to the point......

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.

• 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 di higlightkan dekat code-code diatas.

code yang berwarna merah: code tersebut korang boleh tukar ikut cita rasa korang sama ada nak melengkung tu macam mana. kalo korang letak lagi besar no tersebut. maka lagi lengkung lah tempat yang melengkung itu.

code yang berwarna kunig: code tersebut adalah code warna untuk title sidebar. lebih baik korang gunakan warna yang agak gelap sikit sebab nak pisahkan dengan gadget content.

code yang berwarna biru muda: code tersebut adalah code warna untuk gadget content. di sarankan gunakan agak muda sedikit agar sesuai dengan title sidebar yang malap sikit supaya ada perbezaan.

• kalau dah siap, korang boleh tengok yang code tu macam ini.

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

SELAMAT MENCUBA