July 5, 2011

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.

17 comments:

NasQ said...

malas nak buat. tolong buat boleh?

rafina mimi abdullah said...

letih dah nak buat benda2 ni semua..hehe..nice sharing bagi mereka yg berminat nak belajar..gud job ayie.. :)

Unknown said...

@Nasriq

boleh shje ayie nak tolong btkan..hehe

Ermizi Muhamad said...

hye ayie, ada amik tempahan buat full template beserta header tak ?

adwafarahin said...

blog ayie skrng best lah :)

azwa amani said...

nnati nak try buat sendiri 1 laaa... heheee

YouSOF said...

Rajin la ko Yie.. kejap je dah sambung part 2. mekaseh ye.. rajin nanti ku buat... ;D

semutsengal said...

yea-yea,

dapt tutor..


AHHAHAHAHA

syarifahsidrus said...

rajinnya buta tutorial. uhuhu

Unknown said...

ilot????


hehheeh

Unknown said...

rajin ayie buat tutor :D

syuxer said...

rajin bro..:)..semoga tutorial neh akan mendapat manfaat..

Wanie said...

thanks utk tutorial..:)
cantik gak kalau edit bordet untuk gadget..
nanti rajin cari balik tuto ni..:)

Anonymous said...

Wah..!! Tutorial berguna nie. Ty for the sharing. Blog pun ada nampak ceria. Suka3. ^^

Unknown said...

kalau kita tengok,border tu sama je,cuma kena tukar dekat code, warna kod yg berbeza ikut kesukaan

alia zainol said...

it realy help!tq :)

نورعيم said...

salam.

tuto yg sidebar mcm sebelah ni ---> takde ke?

Blog Azrin Rahim

Mohd Azrin bin Mohammad Rahim
visit my page
 

Design by ZARIN ART 2014