tutorial : sidebar bercorak-corak

maksud na nyna ialah buat sidebar macam ni

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

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??

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

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..

kemudian

untuk buat bahagian A..

korang pilih select then pergi select kat bahagian atas tu

kemudian crop 

kemudian korang hias je border tu..

untuk dapatkan kerawang tu..

mun download swirl brush

macam2 pilihan ada

dah siap hias save dulu..

untuk bahagian B

korang crop je bahagian tengah shape yang mula2 korang buat tu

savekan

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