about My Blog

wohooo~~~ selesai juga ngerombak tampilan blog ini ^^ rasanya cape juga =p sempat dibuat pusing ama HTML yang sebagian besar belum saya pahami gunanya apa =) maklum, saya baru menguasai "kulit-kulit" HTML saja =)

mencoba mendownload Free Template yang sudah disediakan tapi waktu implementasi ke blog saya koq jadinya aneh ya =3 ada yang buat Navigation Bar di atasnya hilang >.<>.< duh, pokoknya kelabakan dah tadi waktu error begitu XD

akhirnya saya nyoba-nyoba aja untuk mengedit template yang memang secara default disediakan Blogger. perubahan yang saya lakukan hanya memperbesar area tampilan. dan sedikit modifikasi posisi Side Bar.

bagi Blogger yang ingin melakukan hal yang sama, tapi tidak tahu apa yang harus dilakukan silakan lihat penjelasan singkat dari saya ^^ (untuk para web desainer yang sudah handal mohon dikoreksi jika ada kesalahan dalam penjelasan saya ^^)

template yang saya gunakan awalnya adalah minima black. untuk template ini, halaman web saya dibagi menjadi beberapa bagian, header (untuk Blog's Title dan Blog's Description), outer warper (ini area dibawah header, jadi semua postingan dan widget-widget teman-teman akan di-"bungkus" di bagian ini), dan terakhir pemisahan dari outer warper menjadi 2 bagian yaitu main warper (ini area dalam outer warper tempat dimana postingan kita ditampilkan) dan sidebar warper (area untuk menampilkan widget-widget, untuk template saya yaitu minimablack, letak sidebar ini adalah di sebelah kanan posting).

lihat "pembedahan" sederhana yang saya lakukan (satuan yang digunakan adalah px yaitu pixel) :

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

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

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

#main-wrapper {
width: 700px;
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 */
}

#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 */
}

bagian yang berwarna merah itu sudah saya ganti sesuai keinginan saya. yang jadi catatan untuk teman-teman, ukuran outer warper >= (ukuran main warper + sidebar warper).
untuk contoh saya : outer warper = 1024px, main warper = 700px, dan sidebar warper = 240px. mengapa saya menyisakan sekitar 104px? karena kalau saya menggunakan semua space yang ada di outer warper dan mendistribusikannya secara total ke main warper dan sidebar warper, maka tulisan-tulisan saya akan saling bertubrukan. lihat lingkaran merah di gambar bawah (klik gambar untuk melihat gambar pada ukuran lebih besar).

ini adalah screenshot ketika saya mamaksimalkan space yang disediakan outer warper (1024px) dengan distribusi main warper = 804px dan sidebar warper = 224px.
keterangan gambar :
area kuning = main warper
area biru muda = sidebar warper

semoga penjelasan sederhana ini bisa membantu teman-teman ^^

good luck,
unwithering_hope a.k.a 8thHeaven