BASIC MEMBUAT TEMPLATES BLOG BAGIAN 2

Sebelum memulai sebaiknya Anda mereview ulang "basic membuat templates bagian 1" agar pembahasan yang akan saya berikan dapat dengan mudah dimengerti. Silahkan ke sini dulu bagi Anda yang belum pernah membaca bagian pertama atau bagi Anda yang lupa BASIC MEMBUAT TEMPLATES BLOG.

Baik kalau sudah dimengerti, mari kita lanjutkan ke tahapan selanjutnya yaitu "MERUBAH UKURAN BLOGPOST DAN SIDEBAR".

Masuk ke menu layout lalu "EDIT HTML". Lihat dulu kode sebelum kita ubah seperti ini:

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

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

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

Dan gambar sebelum kita ubah seperti ini :





Sekarang kita akan ubah lebar blogpost dan sidebar-nya menjadi matching.. Lihat saja gambar di atas masih tidak matching, jarak margin antara blog post dan sidebar terlalu jauh..

Sekarang terserah Anda mau berapa lebar blogpost dan sidebar-nya, tetapi untuk mudahnya dalam pembelajaran kali ini, maka ikuti saja langkah-langkah berikut dengan sama. Nanti kalau memang Anda sudah mengerti baru-lah Anda bisa mengexplore sendiri...

Kita tahu bahwa lebar "OUTER WRAPPER" sudah diubah menjadi 925px dari lebar default templates "MINIMA" yaitu 660px. Tetapi lebar main wrapper dan sidebar wrapper belum kita ubah. Nah, lebar main wrapper dan sidebar wrapper-lah yang harus kita ubah.. Jika kita mau lebar antara blogpost dan sidebar sama, maka lebar outer wrapper dibagi dua yaitu 925px : 2 = 462,5 px. Kita beri saja yang 0,5-nya ke blogpost.. jadi lebar main wrapper-nya 463px dan lebar sidebar wrapper-nya menjadi 462px. Coba Anda ubah kode CSS-nya menjadi seperti ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

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

Jangan disave dulu!!, coba dipreview dulu, maka gambar-nya akan seperti ini :



Seperti yang kita lihat gambar-nya masih tidak matching.. border antara blogpost dan border sidebar beradu (tapi sesuai selera Anda).. Dan seperti-nya lebar sidebar terlalu kebesaran... Yang ideal buat saya (kalau buat Anda ya terserah, sebabnya selera kita berbeda-beda) yaitu lebar blogpost harus lebih lebar dibandingkan lebar sidebar.. Alasannya kalau lebar blogpost kecil, maka artikel kita akan dempet (bahasa mana tuh dempet?? hehehe) maka tulisannya terlalu dekat, rumit dan panjang ke bawah pastinya, yang membuat pembaca merasa agak malas untuk membaca.. Tapi kalau jarak tulisannya jelas, maka pembaca pun akan merasa nyaman untuk membaca.

Jadi coba ubah lebar main wrappernya menjadi "525px" dan berilah margin antara blogpost dan sidebar selebar "20px", berarti sisa sidebar ialah 925px (lebar outer wrapper)-525px (lebar main wrapper atau blog post)-20px (untuk margin)=380px. Jadi lebar untuk sidebar yaitu "380px". Dan kode CSS-nya menjadi seperti ini :

/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 925px
margin:0 auto
padding:10px
text-align:$startSide
font: $bodyfont
}

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

Maka gambar-nya akan menjadi seperti ini :



Gimana? matching kan sekarang ukurannya? kalau menurut Anda kurang matching, Anda bisa merubah-ubahnya sendiri sesuai selera Anda. Untuk saat ini, cukup sekian dulu, nanti dilanjut dengan pembuatan dua buah header, yaitu left header dan right header. Kalau dibahas langsung di sini... Wah pusing nanti (hehehe ... maksud-nya saya yang pusing!!@#$^*).. Ayo terus semangat membuat templates sendiri. Karena biar bagaimana pun, buatan sendiri itu bisa lebih dibanggakan!!..



Semoga dapat membantu Anda yang mau belajar membuat templates dan semoga bermanfaat..

Related Posts by Categories