Saturday, June 12, 2010

(Tutorial) Membuat border dan memisahkan Sidebar.

MoshiMoshi!

Di kala korang baca entry ni, aku kat Penang dah. Masa type ni, aku baru je lepas publish entry blog yang aku adore yang keempat kat Ipoh. Ramai orang request tutorial ni, tapi tahap kerajinan yang buat lambat benor nak kuaq entry ni ha.

Aku jenis suka godek coding dari guna template yang baru yang blogger baru publish kat blogger.com. Tapi kalau kat draft.blogger.com dah lama dah publish. Bagi aku tak thrill kalau tak try and error coding ni sampai kadang-kadang naik juling mata @___@. Bila dapat buat memang sangat puas hati. Aku rasa, semua orang pun macam tu jugak. Bila kite achieve ape yang kite nak mesti kite rasa syiok! Aku selalu refer tutorial tak pun cuba try test je. Haha.


1. Cari code yang ni ye kawan-kawan.

/* Sidebar Content
----------------------------------------------- */


2. Lepas tu paste code ni kat bawah part tadi tu. Adalah better paham seketul-seketul dulu before paste eh.

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background: #F8B4BF;
font-size: 100%;
color: #000000;
}
.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: .5em;
padding-left: 15px;
text-indent: -15px;
line-height: 1.5em;
}
.sidebar {
color: #333333;
line-height:1.3em;
}
.sidebar .widget {
margin-bottom: 2em;
margin-top: 2em;
background: #ffffff;
border: 2px solid #F8B4BF;
padding-bottom: 0.9em;
}
.sidebar .widget-content {
margin: 0 5px;
}


3. Meh nak explain bagi paham dulu before paste. Code yang ni untuk title sidebar.

.sidebar h2 {
margin: 1.6em 0 .5em;
padding: 4px 5px;
background: #F8B4BF;
font-size: 100%;
color: #000000;
}

Yang background: #F8B4BF; tu untuk background title punya colour. Boleh tukar warna ikot korang suka. font-size: 100%; dan color: #000000; font size tu aku rasa 100% tu dah cantik dah, tapi kalau nak tukar boleh je sampai 500%. Then yang color: #000000; tu untuk font color kat sidebar title. Kalau korang jenis berani mati, godek la yang margin and padding tu.


4. Lepas tu code ni paste je. Nak explain tak reti. Sebab dia lebih kepada alignment dan list.

.sidebar ul {
margin: 0;
padding: 0;
list-style: none;
}
.sidebar li {
margin: 0;
padding-top: 0;
padding-right: 0;
padding-bottom: .5em;
padding-left: 15px;
text-indent: -15px;
line-height: 1.5em;
}


5. Untuk code ni pulak, untuk warna tulisan dalam sidebar.

.sidebar {
color: #333333;
line-height:1.3em;
}

Better pilih hitam kot tak pun kelabu gelap.


6. Haaaaaa! Code ni la yang buat widget kite terpisah dengan jaya nya sebab di border-kan!

.sidebar .widget {
margin-bottom: 2em;
margin-top: 2em;
background: #ffffff;
border: 2px solid #F8B4BF;
padding-bottom: 0.9em;
}

Macam biasa, yang merah dan bold tu ikot korang la nak tukar warna ape. background: #ffffff; tu untuk warna dalam sidebar tu. Contoh yang ni, warna dia putih. Then, border: 2px solid #F8B4BF; untuk buat border. Macam biasa, kalau berani mencuba, godek la padding dengan margin ni.


7. Last kali paste je code ni.


.sidebar .widget-content {
margin: 0 5px;
}


8. Dah siap! Yang mana aku bold dan merah kan tu korang boleh tukar ikot suka hati korang.

Macam dotted leh tukar jadi solid or dashed ke. Nak cari warna warna untuk color picker, install benda alah ni dekat mozilla korang. Add-Ons Colorzilla senang kerja nak pilih warna.


NotaKakiHudaSiLuna :
korang boleh tengok belog cap ayam : Tutorial: Pisahkan Widget-widget Pada Sidebar Dengan Border

22 comments:

  1. dear huda..
    tq tq tq 4 da tutorial..
    i dah try buat,hasilnya menjadi..

    ReplyDelete
  2. Hye Huda Superwomen!:D
    Tutorial ni best!

    Ha, amar pun lagi suka main HTML dari guna design dekat draft tu. boleh buat belog kita unik dari belog-belog lain.

    Tapi kan kan kan. Kalau ada yang baru nak cuba main2 HTML ni, mana eh diorang nak cari template minima?
    Kasihan mereka T____T

    Huda, huda best lah. nak pelok!
    omg, bunyi macam tak normal.

    ReplyDelete
  3. kalau guna template third susah la sikit...:)

    ReplyDelete
  4. dah lama nak try buat
    tp xder masa ...
    kank wa raba blog lu balik
    carik mende ni jadik guide
    hahahhahaha


    >>___<<


    joni lu dah gemoook?? keh3x

    ReplyDelete
  5. huda mcm mana ye nak buat muka kita keluar dkt avatar wordpress :')

    ReplyDelete
  6. hye hye..
    thanx bnda ni..
    tp kan cena nk wat tajuk kt side bar cm awk nya 2..
    xreti lah..

    ReplyDelete
  7. hai..thanks for this tutorial..i dah buat dah..hehehhe...

    ReplyDelete
  8. da try kat blog ni:
    http://pinkheartcraft.blogspot.com/

    menjadi la.. hehe. thanx dear.

    ReplyDelete
  9. faten buat bnde nie , jd , tp tajuk ta tau na letak kt mne

    ReplyDelete
  10. maceh sbb tuto nih! mmg terboyek! :D

    ReplyDelete
  11. tak jumpa pn sidebar content. T.T dah cuba guna ctrl+F

    ReplyDelete
  12. thanx for the tuto..dah byk kli try tuto org len..sume tak jadi..sekarang terbukti ur the best=)

    ReplyDelete
  13. yeah! berjaye.. ty so much aw.. law free, gi la blog Nurul yupz!hehe

    ReplyDelete