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 saat ingin mendesain template baru. Ada 2 cara untuk mengatur ukuran (biasanya lebarnya) template.
- Pengaturan ukuran yang tetap dengan lebar yang sudah ditentukan, misalnya 800 pixel.
- Pengaturan ukuran yang fleksibel, artinya ukuran akan berubah tergantung dari browser atau ukuran layar dari komputer.
Untuk mengatur lebar template, harus benar-benar mengatur lebar bagian yang besar-besar, bagian yang paling umum untuk diatur adalah:
- Body
- Outer-wrapper
- Header-wrapper
- Content-wrapper
- Footer-wrapper
- Main-wrapper
- Sidebar-wrapper*
- Footer-wrapper
Untuk menghindari kesalahan/bug, ada baiknya kita bisa mengatur bagian-bagian pembungkus, walaupun itu terjadi pengulangan pengaturannya.
Dalam sebagian besar template saya terbaru, saya juga mengatur lebar dalam kontainer hanya dalam beberapa wrapper (yang berlebihan) untuk menghindari beberapa bug keselarasan kecil yang mungkin muncul. Lebar dari kontainer ini ditetapkan sama dengan lebar dari wrapper kontainer induk mereka. Wrapper ini adalah:
- Header
- Main
Berikut ini adalah kode dari template Blogger Generik, yang menunjukkan pengaturan terhadap lebar template (hanya bagian yang menyangkut pengaturan lebar template yang ditampilkan). Pada contoh kode 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, berarti bahwa lebar terkecil yang dimiliki adalah 800px. Jika hanya diatur dengan perintah width = 800px, maka lebar template kemungkinan menyusut atau berubah dalam beberapa kondisi. Mengatur lebar dengan min-width akan menjamin ukuran terkecil sesuai dengan nilainya.
Bagian selanjutnya yang ada didalam body adalah outer-wrapper. Ini biasanya hanya diatur dengan perintah width = 800px. Akan tetapi lebih bagus jika kita mengatur secara detail untuk menghindari kesalahan/bug atau perubahan ukuran dengan menggunakan perintah min-width dan max-width dengan memberikan nilai yang sama. Pengaturan lain tentang outer-wrapper adalah perintah untuk mengatur 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 biasanya diatur dengan ukuran yang sama. Dalam kasus ini adalah 800px. Dalam beberapa kasus, bagian-bagian ini dapat diatur lebih kecil dari lebar outer-wrapper tetapi tidak boleh lebih besar karena bagian ini ada didalam outer-wrapper. Hal lain, jika ditambahkan batas kiri dan kanan, ini akan menambah lebar, dan outer-wrapper akan memotong bagian yang lebih besar dari ukurannya disisi kanan. Jadi, jika ingin menambahkan batas, misalnya 2px di kiri dan 2px dikanan untuk header-wrapper, maka harus mengatur ukuran header-wrapper
dengan lebar 796px sehingga total lebarnya akan 796 + 2 + 2 = 800px. Kasus yang sama untuk pengaturan bagian yang lain.
Untuk 3 bagian berikutnya, 2 sidebars dan main-wrapper. Karena berada di sisi-sisi samping, harus dipastikan bahwa total lebar adalah 800px atau lebih kecil, tidak boleh lebih. Dalam kasus ini, main-wrapper diatur dengan lebar 400px dan 2 sidebars lebarnya 200px. Tetapi karena ditambahkan padding sebesar 10px dikiri dan kanan disetiap sidebar, maka harus mengurangi lebar sidebar menjadi 180px sehingga kalau jumlahnya ditotal akan 200px. Harus diingat bahwa bagian terbesar dari sidebar container adalah sidebar-wrapper (tidak hanya sidebar). Kita dapat mengatur ukuran sidebar yang berbeda.
Mengatur Ukuran Template yang Fleksibel
Mengatur template dengan lebar yang fleksibel agar sesuai dengan perubahan ukuran browser atau layar komputer, untuk lebih detailnya dapat dipelajari di tutorial W3Schools.
___________________
Sumber: Our Blogger Templates
Download template dari mediafire
29 November 2013 pukul 14.26
thank saya sangat senang dengan artikelnya ..^_^