Tuesday, August 20, 2013

tutorial : sidebar bercorak-corak





cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,cikmun,


maksud na nyna ialah buat sidebar macam ni


cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,cikmun,

sebenarnya mun design sendiri je
guna photoshop
untuk buat sidebar macam ni


mula2 pastikan guna denim template ye..

lepas tu korang pergi ke template > edit HTML
lepas tu tekan ctrl + F  dan cari Sidebar Content

cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,cikmun,

dah jumpe tu
korang delete semua kod semua kod yang macam kat bawah ni



.sidebar h2 {
 margin: 1.6em 0 .5em;
 padding: 4px 5px;
 background-color: $sidebarTitleBgColor;
 font-size: 100%;
 color: $sidebarTitleTextColor;
}
                                                            
.sidebar ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sidebar li {
  margin: 0;
  padding-top: 0;
  padding-$endSide: 0;
  padding-bottom: .5em;
  padding-$startSide: 15px;
  text-indent: -15px;
  line-height: 1.5em;
}
.sidebar {
  color: $textColor;
  line-height:1.3em;
}
.sidebar .widget {
  margin-bottom: 1em;
}
.sidebar .widget-content {
  margin: 0 5px;
}


gantikan kod tu dengan kod ni



.sidebar h2 {
margin: 0.0em 0px 0.0em 0px;
padding:60px 0px 20px 0px;
background:url(URL IMAGE A)no-repeat top;font-size:19px;
color: #777675;
text-align:center;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-$endSide: 0;
padding-bottom: .5em;
padding-$startSide: 0px;
text-indent: -15px;
line-height: 1.0em;
}
.sidebar {
background:url(URL IMAGE B)repeat-y;color: #333333;
line-height:1.5em;
}
.sidebar .widget {
background:url(URL IMAGE C)no-repeat bottom;margin:0px 0px;
padding:0px 0px 60px 0px;}
.sidebar .widget-content {
margin: 20px 10px 0 10px;
}



ape itu url image ABC tu??

cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,cikmun,


jadi korang kena bukak photoshop untuk design tiga bentuk ni
nak guna software photoscape pon mun rasa bole..

mula2 untuk design sidebar ini pastikan size sidebar korang sama dengan side width sidebar kat coding tu
macam mun size sidebar mun adalah 250
height tu korang try and error je eh..macam mun..mula2 mun buat dlm 350pixel

cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,cikmun,

untuk buat bentuk ni..mula2 pilih shape ye
korang pilih warna kesukaan korang..mun pilih warna putih
dah siap bentuk tu pergi kat blending option pilih stroke..
kat stroke tu mun pilih warna pink
jadila macam tu..save dulu ye..

cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,cikmun,

kemudian
untuk buat bahagian A..
korang pilih select then pergi select kat bahagian atas tu
kemudian crop 

cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,

kemudian korang hias je border tu..
untuk dapatkan kerawang tu..
mun download swirl brush
macam2 pilihan ada
dah siap hias save dulu..


cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,

untuk bahagian B
korang crop je bahagian tengah shape yang mula2 korang buat tu
savekan

cara2, hias, sidebar, cantikkan sidebar, tutorial sidebar,


untuk bahagian C pun sama..korang select bahagian bawah shape tu..crop..
dan hiaskan



siap..
pergi ke imgur untuk dapatkan url gamba



kadang2 dia xbercantum tau..senget2 la..
jadi korang cube adjust padding die..
xpun
try adjust gamba yang korang buat tu..




banyak kali jgak mun try and error..
akhirnye die bercantum
ohye..kalau nak guna gambar sidebar mun tu..guna jela..
mun xkisah :)
sharing itukan bagus..


mun blaja tuto ni dari kak najiah kite




11 comments:

Cik Nor said...

nice sharing..:)

Unknown said...

ada masa nanti nak try la..
mesti lama nak adjust tu kan? hehe..

khairulsyarafi said...

mnrik tutor niiii!!!

Unknown said...

woww..menarik sangat tuto nie..nk try jugakla nnt..thanks 4 sharing dear..:)

Ruqaiyah Amanina said...

thanks cik mun sbb wat tuto ni. hehe owh cmtu ye. okay :) xoxo

norhasnizakhalid said...

tuto best ni... tapi, mama kena ambil mama memahamkannye.. hihi,

E'in said...

kreatifnye laa hai...

fasham said...

wah boleh tahan senang gak..

Di jemput untuk join mini giveaway dari Lollista http://lollista.blogspot.com/2013/08/first-mini-giveaway-by-lollista.html

Abang Menaip said...

menarik info ni. thnks kongsi :)

Unknown said...

nampak menarik.hehehe :)

Unknown said...

akak..dah test...jd..hehe..thanks akak..