Berlangganan Artikel Via Email

Posting Terbaru

Kursus Kilat Rombak Minima (Bab 1)

|

Kursus Kilat Rombak Minima (Bab 1) - Sesuai janji saya pada postingan sebelumnya, KURSUS KILAT ROMBAK MINIMA akan dimulai. Saya yakin bagi yang sudah membaca postingan "Desain Template yang Gue Banget" dan memang berniat untuk belajar merombak template sudah menyiapkan blog percobaan masing2 dengan template minima. Kenapa minima? karena minima memiliki struktur yang baik dan mudah untuk melakukan penyesuaian. Alamat blog yang saya gunakan adalah minimahack.blogspot.com. Pelajaran pertama adalah melakukan modifikasi pada header. Sebelumnya kita harus tentukan terlebih dahulu lebar dari outer-wrapper yang sesuai dengan keinginan masing2.

Outer-wrapper adalah lebar dasar blog dimana outer-wrapper merupakan patokan dalam menentukan lebar dari elemen2 yang ada dan elemen yang ingin ditambahkan. Dengan kata lain, outer-wrapper adalah lebar maksimum dari body template. Kita akan fokus pada header saja, jadi hiraukan dahulu kekacauan elemen lain yang akan timbul nantinya.

Agar mudah dipahami, kita beri warna terlebih dahulu pada masing2 bagian elemen.

Cari kode css berikut kemudian tambahkan kode background seperti dibawah ini :

#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
background: #ff6;
}

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
background: #ccc;
}

#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #f00;
}

#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
background: #00f;
}

tekan tombol preview untuk melihat perbedaannya.


Penjelasan dari css outer-wrapper :

#outer-wrapper {
width: 660px; (lebar outer, ganti sesuai keinginan anda)
margin:0 auto; (jarak ke luar dari sisi outer)
padding:10px; (jarak ke dalam dari sisi outer)
text-align:$startSide; (posisi text : left/$startSide, right/$endSide, center, justify)
font: $bodyfont;
background: #ccc;
}

Pada blog untuk contoh saya memberi lebar/width 900px dan padding 0px(agar mudah melakukan pengaturan lebar elemen).


Kemudian kita masuk pada bagian headernya.

Kode berwarna merah adalah perubahan, dan tambahan yang saya lakukan. Kode hijau adalah kode yang saya hilangkan


#header-wrapper {
width:740px;
height:160px;(setinggi gambar, hanya kalau menggunakan background tertentu agar kelihatan rapi)
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;
border: 1px solid $bordercolor;
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;
}

perhitungan :
lebar outer-wrapper = 900px;
maka, pada bagian header :
lebar header + padding + border(kalau ada) = lebar outer-wrapper
740px + 150px(padding-kiri) + 10 (padding kanan) + 0(border tdk ada) = 900px

Pengaturan warna dan font dapat dilakukan di bagian "fonts and colors" di blogspot.


Silahkan berimprovisasi pada bagian header blog percobaan anda. Tidak perlu mengikuti apa yang saya lakukan. Ajukan pertanyaan anda lewat kotak komentar postingan ini tentang kode2 yang tidak anda ketahui atau sesuatu yang ingin anda tambahkan pada bagian header. Sertakan link blog percobaan anda jika ingin berdiskusi sesuatu dengan saya. Segala sesuatu tentang header akan saya layani diartikel ini termasuk kode2 html yang ada dibagian header.

INGAT, HANYA BAGIAN HEADER, DAN OUTER-WRAPPER, PERTANYAAN TENTANG PERNAK - PERNIK SEPERTI PENAMBAHAN KOLOM BANNER ATAU NAVIGASI BAR TIDAK SAYA JAWAB KARENA AKAN DIJELASKAN PADA KURSUS KILAT ROMBAK MINIMA (BAB 2). KECUALI, ANDA MAU MEMBERIKAN MASUKAN PADA SAYA TENTANG APA SAJA YANG AKAN DITULIS/TAMBAHKAN PADA BAB 2 GUNA MEMPERCANTIK BAGIAN ATAS BLOG.

Artikel Referensi :
1. Seputar Margin, Padding, dan Border
2. Fonts & Colors
3. Kegunaan Overflow
4. Kode Warna HTML

24 komentar:

Post a Comment