tutorial:hias cantik kotak sidebar anda
- gemuk atau berisi?
- sideincome
- jemput register
- PERCUMA!rawatan wajah
- poster saya?
- handset impian
- Fast & Furious 6
hah..inilah yang aku maksudkan
tutorial kali ini adalah hias kan sidebar korang dengan rekaan korang sendiri(actually tak tahu nak tulis macam mane).harap2 korang faham tajuk di atas..
terlebih dahulu,tuto ini direquest oleh Majot cerewet...(sebenarnya ada 2 3 orang tanya perkara yang sama..tapi maaf lambat sangat kerana mood untk buat tuto hilang)mujur..alhamdulilah,hari ini free..dan bersemangat sikit.
terlebih dahulu..korang tolong vote blog aku boleh?
Mari kite mulakan dengan basmallah..
- pertama sekali korang kena guna denim template(sebab aku biasa guna denim template,sebab denim template sangat mudah,kalau guna template yang lain mungkin boleh tapi korang kena terjah dan cari sendiri kod2 itu)
- bile korang dah pakai denim template,korang kena cari /* Sidebar Content
pastikan korang akan dapat kod yang seperti dalam gambar ini di bawah kod yang korang cari tadi
bile dah dapat macam tuh, korang kena PADAM semua kod itu(seperti di bawah)
.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;
}
..dan gantikan dengan kod ini
SILA COPY DAN PASTE :
.sidebar h2 { margin: 0.0em 0px 0.3em 0px; padding:78px 0px 20px 0px;
background:url(URL IMAGE KORANG(A)no-repeat top;font-size:22px; 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: 15px; text-indent: -15px; line-height: 1.5em; } .sidebar { background:url(URL IMAGE KORANG (B)repeat-y;color: #333333; line-height:1.3em; } .sidebar .widget { background:url(URL IMAGE KORANG (C)no-repeat bottom;margin:0px 0px; padding:0px 0px 60px 0px;} .sidebar .widget-content { margin: 0px 15px 0 15px; }
Selepas berjaya pastekan kod tersebut..korang nampak tak aku letak
URL IMAGE KORANG (A):MAKSUD NYA PADA TOP
URL IMAGE KORANG (B):MAKSUDNYA PADA BADAN
URL IMAGE KORANG (C):MAKSUDNYA PADA KAKI
ehh?apakah semua ni pulak kan...hahahaha?
okay2..jap.sabar dehh....lap peluh jap.
TENGOK PADA GAMBAR DIBAWAH:
faham tak ..?
okay,sekarang ni korang kena lah design ikut kreativiti korang di adobe photoshop.Pastikan ada 3 image ok?pastikan buat saiz(width) sama dengan saiz sidebar korang.aku punyer 360px width.
macam mana nak buat 3 design itu?
sila tengok lagi:video di bawah
maaf sangat...video yg simple...
upload image korang n then letak url image berdasarkan naming yang kite buat tadi ..ok?
padding:itu korang kena ubah ikut kesesuaian ok...
selamat mencube semua..
harap2 ia membantu korang.
harap2 ia membantu korang.
10 comments
memng tunggu tuto ni..nak tanya je lupa..blog akk cantik :D
ReplyDeletethanks kak jia..kalau untuk body post pun same ke??
ReplyDelete@hazdnul shafinasama2 kasih....:)
ReplyDelete@Mimi afiqahyup...sama
ReplyDeletecantiknya..tahanks sharing..^^
ReplyDeleteakhirnya saya dpt juga caranya . thanks ...
ReplyDeleteakak,kalau body post,saiznya berapa?
ReplyDelete@Aina Mishaia bergantung pada blog masing2 dear:) tp keadh nya lebih kurg sma..:)
ReplyDeleteAlhamdulillah .. dah lama cari tutorial ni .. thanks kak .. :D
ReplyDeletepenat google,,akhirnya jmpe jgk..thanks byk bt tuto nie
ReplyDelete