12/12/11

Tutorial cara buat border pada widget sidebar


Tutorial cara buat border pada sidebar ni adalah atas request dari CikBunnyHomei

Untuk buat border pada widget ni kita akan bermain dengan coding CSS..

Mula2 pergi ke desbot---desaign---edit HTML...jangan tick pada expand widget template...

cari code

]]></b:skin>

kemudian masukkan code di bawah di atas code yang dicari

.sidebar .widget {border-radius:15px;border:3px dashed #ff3366;}

cth

.sidebar .widget {border-radius:15px;border:3px dashed #ff3366;}
]]></b:skin>


penerangan code..

border-radius:15px; -untuk membuat round corner pada widget tu

border:3px dashed #ff3366; - 3px tebal border,dashed jenis border putus2,#ff3366 ialah code warna(pink)

jenis border boleh rujuk pada code tutorial

KLIK SINI UNTUK J3N1S B0RD3R

jika anda mahu tambah warna background pada widget tu..tambahkan code

background:#151515;

COntoh

.sidebar .widget {border-radius:15px;border:3px dashed #ff3366;background:#151515;}

dalam entri tutorial ni aku sertakan live demo code yang aku bagi tu..aku guna code css yang ada background..



seperti yang aku terangkan tadi.. rounded corner pada widget,border putus2,border warna pink..dan background kaler kelabu gelap

anda boleh tengok live demo pada sidebar entri ni...

Jenis2 border yang biasa digunakan..
solid
dashed
dotted

code warna RUJUK SINI

Sekian

7 ulasan:

far_east berkata...

awak, ada tak tuto cara nak buat ayat bergerak sebaris sebaris dalam satu border?

far_east berkata...

oke saya dah tengok sampel tue...yup macam tue yg saya nak...sebab saya nak buat kotak untuk 1 hari 1 ayat renungan.. sebab takut ada ayat yg pjg sebab tue minta ayat bergerak sebaris2...

Polskahackrew berkata...

@far_east

ok da siap nnti sy habaq..('',)

Nurul Anisah berkata...

Tutorial ni mnjadi la.Thanks.

Polskahackrew berkata...

@Nurul Anisah

ur welcome.. thanks bg feedback..('',)

Aini berkata...

thanks untuk ilmu ni. Dh buat n jadi! Berganda pahala.. =)

aniesa ahmad berkata...

terima kasih . menjadi . klik mr.nuff tanda upah :D

entri ja

Related Posts Plugin for WordPress, Blogger...