July 3, 2011

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

31 comments:

azwa amani said...

okeyyy.. tak faham..huhuhuhuhuhu.. tak pandai lah nak main coding2 ni.. hehehe.. ea..ada saya di followers tu...

hawiz said...

ajar2..nak3

kotak bulat said...

tu dia...tuto..hehehe..
lengkung tu kt bwh je ke?

Anonymous said...

Terbaik! *thumbsup*

Anonymous said...

wah! tengs 4 sharing!

Firdaus Life said...

ayie, blog ayie dah nampak macam ala-ala wordpress dah.. cool sangat

Unknown said...

@hawiz

boleh jer bng hawiz...

Unknown said...

@kotak bulat

lengkung dekt bawah jee...

Unknown said...

@Freaky

templete jer cm wordpress

Unknown said...

bagus ayie nih :)

Unknown said...

fhm.cuma tmpt nk letak code tuh adalah berbeza ikut template.yg pkai blogspot ngan wordpress template lain

Unknown said...

@Rozuan Ismail

wordpress memang xboleh guna..hanya untuk blogspot shje...

zati embong said...

ooh boleh diguna pakai ni.hihi.kaler border 2 cane ayie?

Unknown said...

@zati embong

maksud ayie..kalu sis guna warna background biru muda.. so, yg border itu sis boleh gunakan warna biru tua sikit..huhu

. said...

dapat ! tengs sharing :)

semutsengal said...

puas aku cari mana yang melengkung tuu..


kat bawah rupanya..

CintaZulaikha said...

klu buat byk2 widget cenggini takkn bert ke blog kita, ayie..??

Unknown said...

@CintaZulaikha

tidak akan memberatkan blog pon kak..sebb yer yg bt berat blog adlh widget...

Unknown said...

melengkung bawah je?
akak kurang minat gitu..
lebih kemas bila melengkung semua..

Wanie said...

kalau nak lengkuk atas bawah cane lak?huhu

Azwa Mohamad said...

wah, terer la!!! :D

Xx said...

nice one ayie ^___^ hehehe nak try , hehe

Unknown said...

hehhe...kalo nk wat bentuk pokok?hahaha..tibe2

Arpiiz said...

okay, boleh dijadikan rujukan ni..^^

IMANSHAH said...

dah maju na..keterbatasan waktu menyebabkan rasanya tak upaya untuk abng berblog lebih kerap

Solihin Zubir said...

woahhh.. ayie...
lpas ni bleh wat bisnes ni.. heheh..

syuxer said...

perghhh power ar ayie neh..siap wat tutorial..:)..insyaAllah suatu ari nanti dah boleh wat bisnes design2 blog hehe..

Alif Haris said...

uwaahh ayie dah pndai la die .. ^^

mst rajin menimba ilmu kt tenet kan :)

bagus2 .. nnt ade pape boleh alif tgk tuto ayie ni :)hehe

rafina mimi abdullah said...

tahniah ayie..dah pandai buat semua ni.. :)

Unknown said...

macam dah berubah je blog ni...nice..bab koding2 ni lemah ni..wah buat tutorial..maju setapak lagi..tahniah

YouSOF said...

Aku tak pernah terfikir nak buat tuto² ni pun Yie.. sebab aku tak reti.. ;D

Blog Azrin Rahim

Mohd Azrin bin Mohammad Rahim
visit my page
 

Design by ZARIN ART 2014