Instagram

Tuesday, May 31, 2011

# Tutorial : border macam dunia Ayu...

weee....another tutorial lagi malam ni...huhuhu...dan dari CIKGU RIN...hehehe...segan ekcelly nak ajar sebab aku ni bukan ada bakat sangat nak mengajar...huhuhu...sekadar cukup-cukup makan je tu boleh lah...hehehe... siap cikgu buat satu entry khas untuk ayu...hehehe...malunya...:p

kepada CIKGU RIN...kalau ada yg tak faham...please...let me know eh... sebab ayu bukan pndai pun bab nak bg tutor nih...tak de bakat langsung nak jadi cikgu...hehehe...

back to the story...Cikgu Rin mintak ajar dia macam mana nak buat border macam yg sidebar DUNIA AYU nih...macam pic kat bawah nih...

maksudnya...border untuk title tu tak terpisah dengan border bawahnya...kalau kita biasa tengok...border untuk title sidebar tu akan terpisah dari border bawahnya... macam tu lah lebih kurang...aku pun tak reti nak explain cam mane...hehehe... sekarang...kita pegi step by step eh...tak susah pn sebenarnya...

  • Dashboard> design > edit HTML > thick pada expand widget templates
  • tekan ctrl + F untuk memudahkan pencarian ye...
  • cari kod ni
.sidebar .widget {
  • dah jumpa???  highlightkan kesemua kod yg ada kat bawah kod di atas...dan gantikan dengan kod ni
.sidebar .widget {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhPOIyo_ULAZbRXIexkoJMEllsoI-YmxRGD1zICN06quNK2Stzt4-sAjIB8_I-DGpy2o1LI7lQN87_TWgv7im29eD4-2FTjj0U4fk2vtqPZEiIxmnHqwX809d4XAlYrkdNhr_bRWfLBF2X/s1600/semi+transparent+background.png) repeat;
border:3px solid #DE6A7C;
margin:0 -5px 10px -5px;
padding:0px 0px 10px 0px;
border-radius:30px 30px 30px 30px;
}
  • itu untuk keseluruhan widget...dan untuk title dia pulak...cari kod nih...
.sidebar h2 {
  • dah jumpa??? highlightkan kesemua kod yg ada bawah kod diatas, dan gantikan dengan kod ni...
.sidebar h2 {
border-bottom: 3px solid #DE6A7C;
text-align: center;
text-transform: uppercase;
background: url(http://dl6.glitter-graphics.net/pub/2137/2137156lmvc5i2rxm.gif) repeat;
font-size: 120%;
border-radius:27px 27px 0px 0px;
padding:10px;
color: #7d2442;
font-weight:bold;
}
  •  then, preview dulu supaya cukup berpuas hati okey... 
  • kalau dah senyum tu...dah boleh tekan save template!
p/s : maybe sesetengah template tu tak ada kod untuk 
.sidebar h2 { tu...tapi jangan risau...boleh tambah je kod tu...

AT-10-TION! highlight HIJAU untuk border berapa tebal nak, KUNING unutk jenis border, PINK untuk warna border dan MERAH untuk background belakang title sidebar tu...

selamat mencuba!!!!

untuk keterangan lanjut boleh tanya encik  SYAFZMAGZ sebab dia yang tolong editkan blog ayu nih...hehehe

7 comments:

Unknown said...

nak try lah t:)nak tdo dulu.hehe..

♥ AkuMuslimSederhana ♥ said...

ayu!da jadi da..thanks~tgk la blog rin..tp xsecantik blog ayu..:(

♥ AkuMuslimSederhana ♥ said...

alamak ayu..xjadi la..so sad..rin xreti buat:(

-✿Ayu✿- said...

@nanakimie
hehehe...try...jgn tak try...

-✿Ayu✿- said...

@♥ Frau Reen ♥
wa...gud2 kalu dah jadi...heheh

Anonymous said...

nak tambah kod .sidebar h2 { tu kat mana???????????????????????????????????????????????????????????????????????????????????sedey la tak jumpa

نور علياء فاطمة said...

umm..cdey..da try ..p x pandai ...ummm

2leep.com