Cara Mengatur Ukuran Template

Tutorial 6:  Cara Mengatur Ukuran Template
Salah satu hal pertama yang perlu dilakukan ketika mulai merancang template baru adalah  Mengatur ukuran template. Untuk itu ada dua cara dalam mengatur ukuran lebar dari  suatu template diantaranya :

1. Pengaturan ukuran tetap dengan lebar yang sudah ditentukan, misalnya 800 pixel.
2. Pengaturan ukuran fleksibel, ukuran ini akan berubah tergantung dari browser atau ukuran layar dari komputer.

Mengatur ukuran template tetap:

Ini harus mengatur lebar bagian yang besar-besar, misalnya kontainer atau bagian :

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

* Catatan : Kita dapat juga hanya mengatur lebar dari sidebar1 dan sidebar2  tanpa mengatur lebar sidebar-wrapper.
Untuk menghindari kesalahan/bug, ada baiknya kita juga mengatur bagian-bagian pembungkus, walaupun itu terjadi pengulangan pengaturannya.
  Berikut ini adalah kode dari template Blogger, 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; /* 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; }
  Lebar body diatur dengan perintah min-width = 800px, berarti lebar terkecil adalah 800px. Jika diatur dengan perintah = 800px saja, maka lebar template mungkin menyusut dalam beberapa situasi. Mengatur dengan min-width menjamin ukuran terkecil yang diperlukan.
Selanjutnya yang ada dalam  body adalah outer-wrapper. Umumnya diatur dengan perintah = 800px saja. Seperti telah dijelaskan bahwa lebih baik jika kita mengatur secara detail untuk menghindari kesalahan/bug yaitu dengan menggunakan perintah min-width dan max-width dengan memberikan nilai yang sama.
Pengaturan lain dalam 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 di posisi kiri sebagai default.
Tiga bagian besar berikutnya adalah  header-wrapper, content-wrapper, dan footer-wrapper ,  biasanya diatur dengan ukuran yang sama. Dalam hal 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. ini berlaku juga untuk bagian lainnya.
Tiga bagian besar  berikutnya adalah  2 sidebars dan main-wrapper. Ini 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 Kontainer adalah sidebar-wrapper (tidak hanya sidebar). Kita dapat mengatur ukuran sidebar yang berbeda.
Mengatur ukuran template Fleksibel :
Untuk menetapkan template dengan lebar yang berubah atau fleksibel dengan browser atau ukuran layar komputer, agar lebih jelas silahkan lihat di W3Schools Tutorials .
***************************************
Demikian tentang   Cara Mengatur Ukuran Template,
Berikutnya Tutorial 7 :  Kode Template Blogger Pada Bagian Body .
Source : Our Blogger Template.

---

1. Thanks telah mampir, yo kita saling vote dan comment..
2. Bila berkenan tolong share/bagikan dengan tombol share dibawah.
3. Gratis langganan artikel blog ini, silahkan klik Subscribe Disini, atau masukan email disidebar yg telah disediakan

---