Godek Blog Kak Kujie 2012

By on 1-03-2012 in Teknologi

Miahahahaha. Ok, serius. Ini godek dengan kebenaran.

kakjie-theme-baru-edit-header-beza

Mula-mula saya godek header. Besar sangat katanya. Maka saya buang margin-top: 20px tersebut. Tujuannya untuk facelift sikit banner ke atas.

1
2
3
4
5
6
7
8
#header {
background: url("images/bannerkujie.jpg") no-repeat scroll center top transparent;
cursor: pointer;
display: block;
height: 220px;
/* margin-top: 20px; */
width: 960px;
}


Kemudian untuk tulisan Hidup Biar Sedap dan garisan bawahnya itu, saya ubah sikit. Sebab bagi saya gambar garisan itu makan ruang. Tingginya 159px. Saya pendekkan kepada 140px. Nanti kakjie save dan gambar tu dan tukar la dalam theme tu. Saya tambah margin-top untuk kasi facelift pula kepada tulisan Hidup Biar Sedap tu.

Dan solek sikit tulisan “Kisah hidup yang terlalu indah untuk dibiar tanpa erti…” dengan ubah line-height daripada 90px kepada 75px. Margin-bottom pun boleh buang kalau rasa jarak antara garisan dengan menu terlalu jauh. Saya rasa jauh. Kalau tak, biarkan saja.

1
2
3
4
5
6
7
8
9
10
11
12
13
#logo {
/* background: url("images/header.jpg") repeat-x scroll 0 24px transparent; */
background: url("http://lomotech.com/blog/wp-content/uploads/2012/01/bannerkakjie.jpg") repeat-x scroll 0 24px transparent;
clear: both;
height: 101px;
/* line-height: 90px; */
line-height: 75px;
/* tambah margin-top */
margin-top: -30px;
margin-bottom: 50px;
padding-bottom: 56px;
z-index: -1;
}

Setakat tu je la dulu. Nanti sambung lagi.

Sambung lagi (2012-Jan-07)

Kali ini ubah sikit lagi. Ruang antara ”Kisah hidup yang terlalu indah untuk dibiar tanpa erti…” dengan menu navigasi terlalu jauh. Tetapi antara menu navigasi dengan badan entri dan sidebar terlalu dekat.

1
2
3
4
5
6
7
8
9
10
#logo {
background: url("http://lomotech.com/blog/wp-content/uploads/2012/01/bannerkakjie.jpg") repeat-x scroll 0 24px transparent;
clear: both;
height: 101px;
line-height: 75px;
margin-top: -30px;
/* margin-bottom: 50px; */
padding-bottom: 56px;
z-index: -1;
}

Saya ubah lagi #logo. Saya buang margin-bottom: 50px untuk berikan anjakkan pada menu navigasi lebih hampir dengan ayat di atas tersebut. Kemudian saya ubah pula #access.

1
2
3
4
5
6
7
8
9
10
#access {
display: block;
float: left;
font-family: 'Neuton',georgia;
/* margin: 2px auto 0px; ubah kepada yang dibawah */
margin: 2px auto 20px;
position: relative;
width: 940px;
z-index: 500;
}

Saya tambah margin-bottom: 20px (yang diringkaskan sebagai margin: 2px auto 20px). Dan seharusnya menu navigasi dan entri akan sedikit jarak dan lebih cantik dalam sudut navigasi. Gambar dibawah ada beza antara dua. Di kiri yang lama, kanan yang baru.

kakjie-theme-baru-edit-nav-beza

Ok. Itu sahaja setakat ini. Kalau ada lagi saya sambung.

4 Comments

  1. dah cuba buat, cuba tgok

    hihi…terimakasih kerana rajin

  2. formasi berkala ni punya construction.. memang main kat style.css je eh benda ni..

Submit a Comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>