Jun 15, 2013

tutorial:hias cantik kotak sidebar anda

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

  1. 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)
  2. 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.


10 comments:

  1. memng tunggu tuto ni..nak tanya je lupa..blog akk cantik :D

    ReplyDelete
  2. thanks kak jia..kalau untuk body post pun same ke??

    ReplyDelete
  3. akhirnya saya dpt juga caranya . thanks ...

    ReplyDelete
  4. akak,kalau body post,saiznya berapa?

    ReplyDelete
  5. @Aina Mishaia bergantung pada blog masing2 dear:) tp keadh nya lebih kurg sma..:)

    ReplyDelete
  6. Alhamdulillah .. dah lama cari tutorial ni .. thanks kak .. :D

    ReplyDelete
  7. penat google,,akhirnya jmpe jgk..thanks byk bt tuto nie

    ReplyDelete

Follow me

Hai.!Saya Jia.

Saya mengambil tempahan full edit blog; ☑personal dan ☑business. ➹Nak yang responsive template blog; insyaAllah boleh request Harga? Yang pastinya mampu milik dan berpatutan. Email: ✉najiahshaharain@gmail.com Whatsapp: ✆0174428730 ☂Untuk review produk boleh email sy :najiahshaharain@gmail.com

Followers