Buat Border Melengkung - 2

on Jul 22, 2011

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


1 comments:

Ckin Kembaq said...

Assalamualaikum tuan blog..
tq bagi tutorial yang senang sangat ni..da lama ngat cariknya..hehe

nak tanya sikit boleh x?

Macam mana nak tukar font tajuk sidebar tu? and macam na nak kecikkan atau besarkan font?

p/s : kalu free, jawab naa.. ^_^

Followers

pop up text

Blog Archive

Top Ranking Pro PR

My Blog List