MENGATUR UKURAN TEMPLATE

BELAJAR MEMBUAT BLOGGER TEMPLATE 7

Mengatur ukuran template mungkin adalah hal pertama yang perlu dilakukan ketika mulai mendesain template baru. Ada dua cara untuk mengatur ukuran (pada dasarnya lebar) template.
1. Mengatur ukuran template dengan fixed width (ukuran tetap) lebar tertentu, bilang saja 800 pixels.
2. Mengatur ukuran template dengan fluid size, lebar template berubah sesuai dengan browser atau screen size

Untuk mengatur lebar template, kita sebenarnya harus mengatur lebar dari sedikit container besar. Container yang paling umum diatur lebarnya adalah :

1. Body
2. Outer-wrapper
3. Header-wrapper
4. Content-wrapper
5. Footer-wrapper
6. Main-wrapper
7. Sidebar-wrapper*
8. Footer-wrapper

*Note: Kita juga bisa hanya mengatur lebar dari sidebar1 dan sidebar2 tanpa mengatur lebar sidebar-wrapper. Mengatur sidebar-wrapper akan baik jika kedua sidebar memiliki lebar yang sama.

Dalam template-template terbaru ourblogger.com, desainernya juga mengatur lebar container yang hanya di dalam beberapa wrapper container (cukup mubasir) untuk menghindari beberapa alignment bugs kecil yang mungkin muncul. Lebar container ini diatur sama seperti lebar dari container induknya. Container itu antara lain :

1. Header
2. Main

Ini adalah contoh kode dari Generic Blogger Template yang memperlihatkan semua lebar container yang diatur untuk meyakinkan lebar template benar-benar diatur (hanya lebar yang tepat yang ditampilkan). Dalam contoh ini, lebar template adalah 800 pixel.

body {
min-width: 800px; }

#outer-wrapper {
margin: 0 auto; /* to make the template lays in the screen center */
min-width: 800px;
max-width: 800px; }

#content-wrapper {
min-width: 800px;
max-width: 800px; }

#header-wrapper {
min-width: 800px;
max-width: 800px; }

#main-wrapper {
min-width: 400px;
max-width: 400px; }

.sidebar {
padding: 10px 10px 10px 10px;
min-width: 180px;
max-width: 180px; }

#sidebar1 {.....}
#sidebar2 {.....}

#footer-wrapper {
min-width: 800px;
max-width: 800px; }

body diatur dengan perintah min-width = 800px, yang berarti bahwa lebar terkecil haruslah 800px. Jika diatur dengan perintah width = 800px saja, lebar template bisa saja berubah tergantung situasi. Mengatur min-width memberikan jaminan ukuran terkecil itu akan digunakan.

Container selanjutnya adalah container di dalam outer-wrapper. Kebanyakan hanya mengaturnya dengan perintah width = 800px saja. Tapi seperti yang dijelaskan sebelumnya, kita sebaiknya mengatur ukuran ini dengan ketat untuk menghindari, akan lebih baik jika mengatur container dengan min-width dan max-width dari nilai sehingga ukuran container benar-benar mengikuti ukuran tersebut- tidak akan berubah atau membesar atau melebar ke besaran yang lain. Hal lain mengenai outer-wrapper, ini adalah tempat dimana kita mengatur perintah untuk bagian lain dari template agar menempatkan diri di tengah-tengah layer atau rata kiri dari outer-wrapper ini. Dalam kasus ini, margin: 0 auto akan menempatkan template di tengah-tengah. Hanya menuliskan margin: 0 akan menempatkannya rata kiri sebagai posisi utama.

Tiga container besar berikutnya, header-wrapper, content-wrapper, dan footer-wrapper selalu diatur dalam ukuran yang sama, dalam kasus ini, 800px. Dalam kasus lain, ketiganya dapat diatur lebih kecil dari lebar outer-wrapper tapi tidak lebih besar, karena outer-wrapper 'membatasi' 3 container ini di dalamnya (kalau dalamnya lebih besar, tidak akan terlihat di layar). Hal lain, jika kita menambahkan border kanan, ini akan menambah lebar, dan akan memotong apapun yang lebih besar darinya di bagian kanan. Jadi, jika kita mau menambahkan border, sebut saja 2px di kiri dan 2px di kanan untuk header-wrapper, kita harus mengatur lebar header-wrapper menjadi 796px sehingga totalnya menjadi 796+2+2 = 800px. Hal yang sama berlaku pada container lainnya.

Tiga container terakhir, yaitu 2 sidebar dan main-wrapper. Karena ketiganya berdampingan, kita harus yakin lebar totalnya sesuai dengan header-wrapper dan kawan-kawan dalam kasus ini lebar=800px atau kurang, tapi tidak boleh lebih. Kembali mengacu pada kasus ini, kita bisa mengatur but main-wrapper menjadi 400px dan dua sidebar yang ukurannya 200px. Tapi karena aq menambahkan padding sebesar di kiri dan kanan setiap, yang mendorong border sidebar keluar, kita harus mengurangi lebar sidebar menjadi 180px sehingga total lebar sesudah diberi padding menjadi 200px. Kita harus mencatat bahwa container sidebar terbesar adalah sidebar-wrapper (tidak hanya sidebar). Kita bisa mengatur lebar dari sidebar-wrapper selain sidebar, Tapi aku lebih suka mengatur lebar sidebar karena aku mungkin akan mengatur 2 sidebar yang memiliki lebar berbeda. Tapi ini hanya tergantung pada selera individu, desainer template yang lain mungkin punya cara-lain untuk mengatur lebar sidebar. Selama itu bekerja, tidak masalah.

Mengatur fluid template size:

Untuk mengatur lebar yang berubah sesuai browser dan ukuran layar, silahkan melihat W3Schools Tutorials untuk lebih detail.