Berlangganan Artikel Via Email

Posting Terbaru

Kursus Kilat Rombak Minima (Bab 1. Lanj)

|

Kursus Kilat Rombak Minima (Bab 1. Lanj) - Berikut lanjutan dari dari Kursus Kilat Rombak Minima (Bab 1). Kenapa bukan BAB 2?? karena setelah dipikir2 masih berkutat diheader. Ga cocok kalo udah masuk BAB 2. wekekke. Yang akan dibahas adalah perombakan struktur header untuk penambahan kolom elemen, dan penambahan navigasi bar serta beberapa improvisasi yang keluar dari struktur umum template.

Ingat, saya hanya mencontohkan saja, saya harap dapat memberi gambaran secara nyata bagi para pemula dalam mendesain template. Karena saya agak kesulitan untuk menemukan kata2 yang tepat untuk menjelaskan secara detail dan sederhana agar dapat dimengerti. Jangan sungkan untuk bertanya baik kode HTML ataupun ingin melakukan penambahan lainnya yang tidak dimengerti. Maklum, saya mempelajari semua ini secara otodidak tanpa guru ataupun buku. Oke, kita mulai pelajarannya (hayahh, wakakkaka).

1. Perombakan Struktur Header

Perhatikan perbedaan dan perubahan yang terjadi pada struktur CSS bagian header berikut

Rombakan header sebelumnya Rombakan header sekarang
#header-wrapper {
width:740px;
height:160px;
margin:0 auto 10px;
border-bottom:10px solid $bordercolor;
padding:10px 10px 10px 150px;
background: #fff url(http://i530.photobucket.com/albums/dd341/herrolim/logo3.gif) no-repeat left;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
margin: 5px;
text-align: left;
color:$pagetitlecolor;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}
#header-wrapper {
width:900px;
height:160px;
margin:0;
padding:0;
background: #fff url(http://i530.photobucket.com/albums/dd341/herrolim/logo3.gif) no-repeat left;
overflow:hidden;
}

#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}

#header {
width:340px;
margin-left: 60px;
text-align: left;
color:$pagetitlecolor;
float:left;
padding:0;
}

#header-kanan {
width:470px;
margin: 10px;
text-align: left;
color:$pagetitlecolor;
float:right;
}

#header h1 {
margin:5px 5px 0;
padding:15px 20px .25em;
line-height:1.2em;
text-transform:uppercase;
letter-spacing:.2em;
font: $pagetitlefont;
}

#header a {
color:$pagetitlecolor;
text-decoration:none;
}

#header a:hover {
color:$pagetitlecolor;
}

#header .description {
margin:0 5px 5px;
padding:0 20px 15px;
max-width:700px;
text-transform:uppercase;
letter-spacing:.2em;
line-height: 1.4em;
font: $descriptionfont;
color: $descriptioncolor;
}

#header img {
margin-$startSide: auto;
margin-$endSide: auto;
}

Cari kode HTML seperti berikut





Ganti kode diatas dengan kode HTML ini -------[RECORD1]








Save.

Coba lihat di halaman "PAGE ELEMENT". Sekarang bagian header sudah terbagi 2 dengan Blog Title disebelah kiri, dan elemen baru disebelah kanan. Elemen baru tersebut bebas digunakan untuk apa saja seperti memasang banner, kode adsense, kode twitter, dll. terserah deh :D. Lebar dari kolom kanan dapat diatur di CSS #header-kanan.

2. Navigation Bar
Tambahkan kode CSS berikut diatas kode ]]>
#kotak-navigasi {
width:100%;
margin:0 auto;
height : 37px;
padding : 0 0 0 0;
font : 11px Century gothic, verdana, Arial, sans-serif;
font-weight : bold;
text-transform : uppercase;
background : url(http://i530.photobucket.com/albums/dd341/herrolim/myherro/bg_menu.png) repeat-x; (GAMBAR BACKGROUND UTAMA)
}
#menu, #menu ul {
margin : 0 5px 0 5px;
padding : 0;
list-style : none;
height : 34px;
}
#menu a {
color : #ddd;
display : block;
font-weight : bold;
padding : 10px 10px 10px 10px;
}
#menu a:hover {
color : #fff;
display : block;
text-decoration : none;
background : url(http://i530.photobucket.com/albums/dd341/herrolim/proff/menu_divider.gif) repeat-x top;(GAMBAR BACKGROUND HOVER/ SAAT MOUSE DIARAHKAN KE MENU)
}
#menu li {
float : left;
margin : 0 0 0 0;
padding : 0;
}
#menu li li {
float : left;
margin : 0 0 0 0;
padding : 0;
width : 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background : #5d0909;
width : 150px;
float : none;
margin : 0;
padding : 5px 10px 5px 10px;
color : #dfc3c3;
}
#menu li li a:hover, #menu li li a:active {
background : #971515;
width : 150px;
float : none;
margin : 0;
padding : 5px 10px 5px 10px;
color : #d7a1a1;
}
#menu li ul {
position : absolute;
width : 150px;
left : -999em;
z-index : 200;
}
#menu li:hover ul {
left : auto;
display : block;
}
#menu li:hover ul, #menu li.sfhover ul {
left : auto;
}


Cari kode
Tambahkan kode berikut diatas atau dibawah kode RECORD1 sebelumnya:


3. Out Of Minima Structure
Pada minima, semua elemen harus mengikuti/tidak boleh melebihi ukuran lebar pada #outer-wrapper. Karena semua elemen memang berada dalam ruang lingkup outernya. Untuk mendesain header dengan lebar 100% selebar layar monitor tidak perlu untuk merubah lebar outernya menjadi 100% juga, karena anda akan kelimpungan untuk merapikan ukuran seluruh elemen dari header hingga footer.

Cara paling mudah untuk membuat header dengan lebar 100% adalah mengeluarkan elemen header itu sendiri dari ruang lingkup #outer-wrapper. Cari kode berikut :



Anda tinggal memindahkan kode tersebut tepat diatas kode :



Selanjutnya anda tinggal mengubah lebar/width dari CSS #header-wrapper menjadi 100%/1000px dan bermain-main dengan lebar dari #header dan #header-kanan. Pada blog contoh saya memberi lebar 400px untuk #header.

Lihat contoh hasilnya di minimahack.blogspot.com

Oh ya ketinggalan, kalo mau menghilangkan navigasi blogspot, anda tinggal memasukkan kode CSS berikut diatas kode ]]>

#navbar-iframe {
height : 0;
visibility : hidden;
display : none;
}

13 komentar:

Post a Comment