Tutorial membuat template blogger dari dasar ( Part V )

Berjumpa lagi di post lanjutan tentang Tutorial membuat template blogger dari dasar, di post kali ini sesuai janji saya kita akan membahas tentang  mengatur ukuran template.

Menentukan Ukuran Template

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.

1. Pengaturan ukuran yang tetap dengan lebar yang sudah ditentukan, misalnya 800 pixel.

2. 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, harus benar-benar mengatur lebar bagian yang besar-besar, bagian yang paling umum untuk diatur adalah: 

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 juga dapat hanya mengatur lebar sidebar1 dan sidebar2 tanpa mengatur lebar sidebar wrapper. Mengatur lebar sidebar-wrapper adalah mudah jika kedua sidebars memiliki lebar yang sama. Untuk menghindari kesalahan / bug, ada baiknya kita bisa 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; /* 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. 

Kode Template Bagian Body 

Dalam tutorial ini akan dijelaskan struktur dasar dari kode template di bagian Body sehingga nantinya dapat memahami bagaimana bekerjanya seluruh kode tersebut. Kode dilokasikan dalam 3 bagian, seperti dijelaskan dalam Struktur Kode Template di Blogger. Body adalah bagian utama dari kode template di Blogger, kode template dibagian inilah yang akan ditampilkan dalam blog. Kode yang berfungsi untuk mengatur bagaimana sesuatu ditampilkan dalam blog adalah kode CSS. Bagian Body ditunjukkan pada bagian 3 dari gambar dibawah: 

  

Kode pada template Blogspot dibagian Body ditunjukkan pada kode dibawah. Kode disini memang tidak ditunjukkan secara lengkap karena memang tidak diperlukan untuk membuat template (hanya bikin pusing saja untuk memahami semuanya). Kode yang ditunjukkan adalah yang sederhana yang penting untuk pembuatan template agar kita lebih mudah untuk memahami. 

 <body>   
 <div id='outer-wrapper'><div id='wrap2'>   
 <!-- untuk text browser -->   
 <span id='skiplinks' style='display:none;'>   
 <a href='#main'>skip to main </a> |   
 <a href='#sidebar'>skip to sidebar</a>   
 </span>   
 <div id='header-wrapper'>   
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>   
 <b:widget id='Header1' locked='true' title='Testpage Two (Header)'   
 type='Header'/>   
 </b:section>   
 </div>   
 <div id='content-wrapper'>   
 <div id='main-wrapper'>  
 <b:section class='main' id='main' showaddelement='no'>  
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>  
 </b:section>  
 </div>  
 <div id='sidebar-wrapper'>   
 <b:section class='sidebar' id='sidebar' preferred='yes'>   
 <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>   
 <b:widget id='BlogArchive1' locked='false' title='Blog Archive'   
 type='BlogArchive'/>   
 <b:widget id='Label1' locked='false' title='Labels' type='Label'/>   
 </b:section>   
 </div>   
 <!-- spasi untuk tampilan agar sidebar dan main punya ketinggian yang sama-->   
 <div class='clear'>&#160;</div>   
 </div> <!-- akhir content-wrapper -->   
 <div id='footer-wrapper'>   
 <b:section class='footer' id='footer'>   
 <b:widget id='Text1' locked='false' title='Blogger Template | Bordr'   
 type='Text'/>   
 </b:section>   
 </div>   
 </div></div> <!-- akhir outer-wrapper -->   
 </body>  

Abaikan kode yang berwarna abu-abu. Secara garis besar kode didalam body, bisa dibagi dalam 4 bagian: 

1.  Header (merah) 
2. Main (hijau) 
3. Sidebar (merah) 
4. Footer (coklat)

Lihatlah kode diatas, bahwa semua kode diantara tag body . Kemudian diikuti tag outer-wrapper dan selanjutnya adalah tag wrap2. Menggunakan wrapper atau pembungkus akan lebih mudah untuk mengedit kode dan menambah elemen dalam suatu bagian. Dalam penjelasan di tutorial ini, kita hanya akan merujuk pada pembungkus yang paling besar yaitu outer-wrapper dan tidak membahas semua wrapper, diharapkan dengan me mahami salah satu, yang lainpun dapat paham. Bagian yang besar terdapat 3 wrapper, yaitu header-wrapper, content-wrapper, dan footer-wrapper. Posisi dari 3 bagian tersebut secara vertikal adalah header-wrapper ada diatas dan footer-wrapper ada dibawah. Untuk memahaminya sangat sederhana, karena kode header-wrapper ditulis pertama, kemudian diikuti oleh content-wrapper, dan terakhir adalah footer-wrapper. Pada tahap ini untuk mengatur tata letaknya, kita tidak perlu tahu apa yang ada didalam content-wrapper - bagian ini nantinya akan berl awanan jika mengatur tata letak dibagian dalam  dari content-wrapper dimana didalamnya terdapat main-wrapper dan sidebar-wrapper. Dibagian tersebut agak lebih pusing untuk memahami. 

Karena outer-wrapper adalah wrapper yang paling besar, maka kita harus memastikan bahwa lebar dari wrapper yang ada didalamnya tidak boleh lebih dari lebar yang ada di outer-wrapper. 

Menambahkan wrapper atau bagian baru diantara salah satu wrapper (pembungkus) itu sangat mudah. Hanya tinggal paste contoh kode dibawah dan ganti dengan nama yang baru, dalam contoh kode dibawah namanya adalah banner-wrapper. Perintah preferred = 'yes ' akan membuat sebuah tombol 'Add Page Element' sehingga nantinya memungkinkan untuk membuat widget baru.

 <div id='banner-wrapper'>   
 <b:section class='banner' id='banner' preferred='yes'>   
 </b:section>   
 </div>  

Menambahkan wrapper hanya menciptakan bagian atau blok baru dalam blog kita. Untuk menyesuaikan tampilannya dan di mana bagian tersebut terletak di blog, kita PERLU sedikit memodifikasi kode CSS. Di dalam content-wrapper, terdapat main-wrapper dan sidebar-wrapper. Untuk membuat 2 wrapper yang letaknya bersampingan seperti yang pada umumnya terlihat di blog, kita harus mengatur lebar sidebar-wrapper tersebut sama dengan atau kurang dari content-wrapper.

Ditambah, kita harus menambah kode tertentu di CSS agar kedua wrapper tersebut posisinya bersebelahan. Jika tidak diatur kedua wrapper tersebut akan mempunyai posisi vertikal diatas dan bawahnya. Biasanya, dengan menggunakan perintah: 'float:left'. Lihat beberapa contoh template untuk memeriksa lebih lanjut tentang ini. Jika ingin menambahkan sidebar (jadi sidebar lebih dari 1), berarti template 3-kolom, hanya perlu menambahkan kode sidebar-wrapper (warna biru). Lebih lanjut nanti akan dibahas pada tutorial berikutnya untuk mengetahui cara menambahkan atau mengubah sidebar.

Setelah memahami kode yang ada didalam body, saya kira mudah untuk mengatur ulang atau menambah wrapper baru dengan memodifikasi kode yang ada didalam Body. Tapi kemudian, untuk mengatur letaknya kita harus memodifikasi kode CSS.

Lebih Lanjut Kode Template Bagian Body

Dalam tutorial ini akan dijelaskan lebih lanjut tentang beberapa perintah khusus yang biasanya ada di bagian body. Lihat contoh kode berikut ini:

 <body>   
 <div id='outer-wrapper'><div id='wrap2'>   
 <!-- skip links for text browsers -->   
 <span id='skiplinks' style='display:none;'>   
 <a href='#main'>skip to main </a> |   
 <a href='#sidebar'>skip to sidebar</a>   
 </span>   
 <div id='header-wrapper'>   
 <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>   
 <b:widget id='Header1' locked='true' title='Blog Title' type='Header'/>   
 </b:section>   
 </div>   
 <div id='content-wrapper'>   
 <div id='main-wrapper'>   
 <b:section class='main' id='main' showaddelement='no'>   
 <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>   
 </b:section>   
 </div>   
 <div class='sidebar-wrapper'>   
 <b:section class='sidebar' id='sidebar2' preferred='yes'>   
 </b:section>   
 </div>   
 <!-- spacer for skins that want sidebar and main to be the same height-->   
 <div class='clear'> </div>   
 </div> <!-- end content-wrapper -->   
 <div id='footer-wrapper'>   
 <b:section class='footer' id='footer'>   
 <b:widget id='Text1' locked='false' title='Blogger Template | JournalBlue'   
 type='Text'/>   
 </b:section>   
 </div>   
 </div></div> <!-- end outer-wrapper -->   
 </body>  

Secara default, setiap blok harus dibungkus dengan tag div dan tag b:section. Setiap tag div dan b:section dinamai (identifikasi) dengan menggunakan perintah id. Perintah tersebut juga dapat diklasifikasikan lebih lanjut kedalam 'class' menggunakan perintah class. Identifikasi dan klasifikasi ini sangat berguna ketika mengatur model/propertinya dengan kode CSS. Didalam kode CSS, perintah id ditunjukkan dengan menggunakan simbol # symbol dan perintah class ditunjukkan dengan menggunakan simbol . Sebagai contoh, dikode CSS terdapat #main-wrapper {...} atau .sidebar {...} yang mana kode ini digunakan untuk mengatur model di main-wrapper dan sidebar. 

Semua blok yang dibungkus menggunakan tag b:section adalah widgets (juga bisa dinamakan Page Element). Untuk contoh, didalam Header ada widget dengan nama Header1. Perhatikan, bahwa widget ini berisi kode maxwidgets='1' showaddelement='no'  Kode maxwidgets='1' berarti bahwa jumlah widget maksimum di header-wrapper adalah 1. Berarti kita tidak dapat menambah widget dengan Page Element dan menempatkan widget tersebut dibawah atau diatas Header. Kode showaddelement='no' berarti bahwa tombol Add a Page Element tidak ditampilkan dibagian Header. Di dalam main-wrapper, kita hanya bisa memberi kode showaddelement='no' yang mana berarti bahwa tombol Add a Page Element tidak boleh ditambahkan disini, tetapi kita dapat meletakkan widget diatas atau dibawah Blog Posts didalam main-wrapper. Di sidebar-wrapper, terdapat kode preferred='yes'. 

Perintah ini akan membuat tombol Add a Page Element agar kita dapat menambahkan widgets. Jumlah widgets yang dapat ditambahkan tidak ada batasnya. Selain itu kita juga dapat menarik atau menggeser widgets untuk diletakkan kedalam wrapper/pembungkus lain dalam jumlah yang tidak terbatas juga. Di footer-wrapper, tidak ada kode perintah id. Ini berarti bahwa tidak ada tombol Add a Page Element akan tetapi kita dapat menarik dan meletakkan widget kedalam bagian Footer.

Untuk post kali ini saya rasa cukup sampai disini, dan utuk Tutorial selanjutnya  kita akan membahas tentang membuat template 3 kolom.