Monday, March 4, 2019

Membuat Template Blogger Part 5 ( 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.


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.

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.




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 memahami salah satu, yang lainpun dapat paham.

Bagian yang besar terdapat 3 wrapper, yaitu header-wrapper, content-wrapper, dan footerwrapper. Posisi dari 3 bagian tersebut secara vertikal adalah header-wrapper ada diatas dan footer-wrapper ada dibawah. Untuk memahaminya sangat sederhana, karena kode headerwrapper ditulis pertama, kemudian diikuti oleh content-wrapper, dan terakhir adalah footerwrapper. 


Pada tahap ini untuk mengatur tata letaknya, kita tidak perlu tahu apa yang ada didalam
content-wrapper - bagian ini nantinya akan berlawanan 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.

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.

Baiklah sobat, mungkin sampai disini sulu artikel saat ini, nanti kita akan lanjutkan pada part selanjutnya tentang : Membuat Template Blogger Part 6 ( Lebih Lanjut Kode Template Bagian Body ).

Terima kasih

Salam,
www.sundaku.com

Related Posts

Membuat Template Blogger Part 5 ( Mengatur Ukuran Template )
4/ 5
Oleh

Subscribe via email

Suka posting di atas? Silakan berlangganan posting terbaru langsung melalui email.