Memodifikasi Template Blogger : Merubah Ukuran

Bosan dengan template blog yang itu itu aja. Atau anda tidak menemukan template blog yang sesuai dengan keinginan anda sehingga anda ingin membuat template blog sendiri? Membuat template blog sendiri memiliki kelebihan daripada anda memakai template yang sudah ada. Dengan membuat template blog sendiri anda bisa mendesain sesuai dengan kebutuhan, keinginan dan tentu selera anda sendiri. Lalu bagaimana cara termudah membuat template blog sendiri? Sebenarnya cara termudah membuat template blog sendiri adalah dengan memodifikasi template blog yang sudah ada. Anda bisa menggunakan template bawaan dari blogger lalu memodifikasinya sesuai dengan keinginan anda.

Melalui tulisan ini saya mencoba sedikit menjelaskan bagaimana membuat template sendiri dengan memodifikasi template blog bawaan blogger, yaitu minima. Bagian ini saya akan menjelaskan cara merubah ukuran elemen-elemen template minima.
OK kita langsung saja mengambil template minima dari blogger. Pertama masuk ke akun blogger anda, saya asumsikan anda sudah mempunyai akun di blogger. lalu klik layout atau tata letak.



Lalu klik pilih template baru



Setelah itu pilihlah template minima

Jika sudah lalu simpan template dan klik edit HTML maka anda akan dibawa ke halaman yang berisi deretan kode kode HTML
Layout template minima sendiri adalah seperti gambar dibawah ini. Untuk kemudahan saya telah mengganti warna dari elemen-elemen template minima

• Area yang berwarna putih (area terluar) adalah elemen body
• Area yang berwarna coklat adalah elemen outer-wrapper
• Area yang berwarna kuning adalah elemen header-wrapper
• Area yang berwarna hijau adalah elemen main-wrapper
• Area yang berwarna biru adalah elemen sidebar-wrapper
• Area yang berwarna coklat muda adalah elemen footer

Urutan elemen diatas adalah dari elemen yang terluar ke yang paling dalam dan beberapa elemen membungkus elemen didalamnya.
Elemen body adalah elemen yang terluar lalu diikuti oleh outer-wrapper lalu header wrapper, main wrapper , sidebar-wrapper dan footer-wrapper. Elemen body sebagai elemen yang terluar membungkus semua elemen lainnya. Elemen outer-wrapper membungkus elemen header-wrapper, main-wrapper, sidebar-wrapper, dan footer. Mengapa kita perlu memahami struktur elemen-elemen tersebut adalah karena jika kita ingin memodifikasi ukuran sebuah elemen, terutama untuk lebar, kita juga harus memperhatikan ukuran elemen yang membungkusnya. Misalnya jika kita ingin menambah ukuran lebar elemen header-wrapper maka kita harus memperhatikan ukuran elemen yang membungkusnya yaitu elemen outer-wrapper. Bingung?? Tenang aja sekarang mari kita berlatih memodifikasi ukuran elemen template.
Ukuran template bisa kita atur melalui kode kode CSS. Template minima mempunyai ukuran lebar 660px. Ini bisa kita lihat dari ukuran width di elemen outer-wrapper, header-wrapper, dan footer-wrapper. Cari kode seperti dibawah ini :

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Kode yang berwarna merah menunjukkan lebar template minima.Biasanya ukuran di atur berdasarkan pixel. Jika anda ingin merubah ukuran lebar template anda maka yang perlu dirubah adalah nilai dari properties width. Misalnya kita akan menambah lebar template kita menjadi 800 pixel, maka kita tinggal merubah aja nilai width dari elemen outer-wrapper, header-wrapper, dan footer menjadi 800px. Silahkan anda mencoba dan lihat hasilnya.
Selain properties width yang perlu diperhatikan dalam mengatur ukuran template adalah properties margin dan padding.
Margin adalah jarak antara sebuah elemen dengan elemen diluarnya sedangkan padding adalah jarak antara sebuah elemen dengan elemen yang berada didalamnya atau yang dibungkus olehnya. Misalnya dalam elemen outer-wrapper

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;

margin: 0 auto berarti jarak antara elemen outer-wrapper dengan elemen diluarnya yaitu elemen body 0px tetapi karena ada panambahan auto maka elemen outer-wrapper akan berada ditengah. Sedangkan padding sebesar 10 pixel berarti jarak antara elemen auter-wrapper dengan elemen yang berada didalamnya, yaitu header-wrapper, main-wrapper, sidebar-wrapper, dan footer, sebesar 10 pixel. Ada ketentuan dalam penulisan margin dan padding. Anda bisa menentukan secara terpisah nilai margin dan padding untuk semua sisi atau ditulis secara bersama sama.
Penulisan secara terpisah, misalnya contohnya:

#outer-wrapper{
Margin-top: 10px;
Margin-right: 10px;
Margin-bottom: 10px;
Margin-left: 10px;
}
Atau anda bisa menuliskannya hanya dengan:

#outer-wrapper{
Margin: 10px 10px 10px 10px;
}

Untuk penulisan secara bersama urutannya adalah dimulai dari sisi atas lalu sisi kanan kemudian sisi bawah dan terakhir adalah sisi kiri. Begitu juga dengan cara penulisan nilai padding sama seperti diatas. Silahkan anda mencoba mengutak atik sendiri dan lihat hasilnya. Jika masih ada yang dirasa susah dimengerti silahkan tulis aja dikotak komentar saya akan mencoba menjelaskan sebisa saya. sebenarnya kunci keberhasilan belajar memodifikasi template adalah sering berlatih. tidak perlu takut salah toh masih bisa diulang. Ok semangat dalam belajar dan berlatih. bagian berikutnya saya akan menjelaskan bagaimana memodifikasi background dari setiap elemen template minima.

Related Articles by Categories