Sabtu, 21 Agustus 2010

Merubah Ukuran Elemen Pada Template Blog


Template pada blog pada dasarnya berisi kode-kode yang saling berhubungan. Di dalam sebuah template umumnya terdapat beberapa bagian atau dibagi menjadi beberapa bagian, yang diantaranya adalah :

= Header
== Halaman posting
=== Sidebar
==== Footer
===== Halaman dari blog itu sendiri


kadang secara deault ukuran dari elemen diatas sudah diatur oleh sang pembuat template. Tapi untuk kita selaku anak baru alias newbie didunia blogger pasti merasakan penasaran dan ingin mencoba mengotak-atik kode-kode dalam template. Disini saya akan memberikan solusi untuk kalian yang ingin merubah ukuran tiap elemen pada template blog.
CATATAN PENTING : jika kalian merubah ukuran salah satu elemen diatas, maka kalian harus menyeimbangkan tampilan template dengan merubah ukuran yang lainnya seperti yang saya katakan diatas kalo semua elemen ini saling berhubungan.

OK... langsung ke pokok permasalahan, berikut saya jelaskan cara merubah ukuran untuk tiap bagian elemen diatas.

1. Merubah ukuran Header

kalian cari kode berikut :

#header-wrapper {
overflow: hidden;
height: 90px;
border-bottom: 1px solid #021f32;
width: 960px;
margin:0 auto;
}

2. Merubah ukuran Halaman posting

kalian cari kode berikut :

#main-wrapper {
float: left;
width: 600px;
padding: 0;
background: #fff;
}

3. Merubah ukuran sidebar

kalian cari kode berikut :
#sidebar-wrapper {
width: 320px;
float: $endSide;
}
4. Merubah ukuran footer

kalian cari kode berikut :

#footer {
overflow: hidden;
width: 1000px;
margin: 0 auto 14px auto;
padding: 2px 0 0 0;
}

5. merubah ukuran Halaman Blog

kalian cari kode berikut :

#outer-wrapper {
width: 100%;
margin:0 auto;
padding:0px;
text-align:$startSide;
font: $bodyfont;
}

KETERANGAN :
== Untuk merubah ukuran lebar masing2 elemen kalian perhatikan kode berwarna merah
== Untuk ukuran biasanya dalam bentuk px atau %
== Untuk setiap template kode CSS diatas tidak akan sama persis tergantung templatenya sendiri dan tergantung yang membuat template.

Semoga artikel sederhana diatas dapat membantu dan sebagai sarana belajar buat kita yang sedang mendalami dunia blogger.

No comments yet