Desain Template Blogger: Tutorial 7
<< Tutorial 6: Bagian dan Elemen Umum Template Blogger
>> Tutorial 8: Bagian Body pada Kode Template Blogger
Kembali ke Daftar Isi
Menentukan ukuran template mungkin merupakan salah satu hal yang harus dipikirkan pertama kali dikala ingin mendesain template gres. Ada 2 cara untuk mengendalikan ukuran (biasanya lebarnya) template.
- Pengaturan ukuran yang tetap dengan lebar yang telah ditentukan, contohnya 800 pixel.
- Pengaturan ukuran yang fleksibel, artinya ukuran akan berubah tergantung dari browser atau ukuran layar dari komputer.
Mengatur Ukuran Template Yang Tetap
Untuk mengatur lebar template, mesti sungguh-sungguh menertibkan lebar bab yang besar-besar, bab yang paling biasa untuk dikontrol ialah:
- Body
- Outer-wrapper
- Header-wrapper
- Content-wrapper
- Footer-wrapper
- Main-wrapper
- Sidebar-wrapper*
- Footer-wrapper
* Catatan: Kita juga mampu hanya menertibkan lebar sidebar1 dan sidebar2 tanpa mengendalikan lebar sidebar-wrapper. Mengatur lebar sidebar-wrapper ialah mudah jika kedua sidebars mempunyai lebar yang serupa.
Untuk menghindari kesalahan/bug, ada baiknya kita bisa mengontrol bab-bagian pembungkus, walaupun itu terjadi pengulangan pengaturannya.
Dalam sebagian besar template saya terbaru, saya juga mengontrol lebar dalam kontainer cuma dalam beberapa wrapper (yang berlebihan) untuk menghindari beberapa bug keselarasan kecil yang mungkin timbul. Lebar dari kontainer ini ditetapkan sama dengan lebar dari wrapper kontainer induk mereka. Wrapper ini ialah:
- Header
- Main
Berikut ini adalah instruksi dari template Blogger Generik, yang memberikan pengaturan kepada lebar template (cuma bab yang menyangkut pengaturan lebar template yang ditampilkan). Pada pola arahan ini, lebar template ditetapkan 800 pixel.
body min-width: 800px; #outer-wrapper margin: 0 auto; /* untuk membuat template ada ditengah layar */ 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;
Lebar body diatur dengan perintah min-width = 800px, mempunyai arti bahwa lebar terkecil yang dimiliki yaitu 800px. Jika cuma dikontrol dengan perintah width = 800px, maka lebar template kemungkinan berkurang atau berubah dalam beberapa keadaan. Mengatur lebar dengan min-width akan menjamin ukuran terkecil sesuai dengan nilainya.
Bagian berikutnya yang ada didalam body yaitu outer-wrapper. Ini biasanya cuma diatur dengan perintah width = 800px. Akan namun lebih anggun jika kita mengontrol secara rincian untuk menghindari kesalahan/bug atau perubahan ukuran dengan memakai perintah min-width dan max-width dengan menunjukkan nilai yang sama. Pengaturan lain perihal outer-wrapper ialah perintah untuk mengendalikan posisi template, apakah ditengah layar, atau kekiri. Pengaturan dengan perintah margin: 0 auto akan menempatkan template berada pada posisi ditengah layar. Sedangkan dengan perintah margin: 0 akan menempatkan template ada di posisi kiri sebagai default.
Tiga bagian besar berikutnya adalah header-wrapper, content-wrapper, dan footer-wrapper yang umumnya dikontrol dengan ukuran yang serupa. Dalam kasus ini yaitu 800px. Dalam beberapa kasus, bab-bab ini dapat dikontrol lebih kecil dari lebar outer-wrapper namun tidak boleh lebih besar alasannya adalah bagian ini ada didalam outer-wrapper. Hal lain, bila disertakan batas kiri dan kanan, ini akan menambah lebar, dan outer-wrapper akan memangkas bagian yang lebih besar dari ukurannya disisi kanan. Kaprikornus, kalau ingin menambahkan batas, misalnya 2px di kiri dan 2px dikanan untuk header-wrapper, maka mesti mengendalikan ukuran header-wrapper
dengan lebar 796px sehingga total lebarnya akan 796 + 2 + 2 = 800px. Kasus yang serupa untuk pengaturan bagian lainnya.
Untuk 3 bab berikutnya, 2 sidebars dan main-wrapper. Karena berada di segi-segi samping, harus dipastikan bahwa total lebar yaitu 800px atau lebih kecil, tidak boleh lebih. Dalam kasus ini, main-wrapper dikelola dengan lebar 400px dan 2 sidebars lebarnya 200px. Tetapi alasannya adalah ditambahkan padding sebesar 10px dikiri dan kanan disetiap sidebar, maka mesti meminimalkan lebar sidebar menjadi 180px sehingga jikalau jumlahnya ditotal akan 200px. Harus diingat bahwa bab terbesar dari sidebar container adalah sidebar-wrapper (tidak cuma sidebar). Kita dapat menertibkan ukuran sidebar yang berbeda.
Mengatur Ukuran Template yang Fleksibel
Mengatur template dengan lebar yang fleksibel biar sesuai dengan perubahan ukuran browser atau layar komputer, untuk lebih detailnya mampu dipelajari di bimbingan W3Schools.
___________________
Sumber: Our Blogger Templates
Download template dari mediafire