Thursday, August 4, 2016

Skipzen - Design Template Blogger, Weight dan Height. Walaupun kini sudah lebih dari ribuan jenis template blogger yang hadir untuk memuaskan kebutuhan para penggunanya, tapi masih banyak para blogger yang kurang puas dengan desainnya. Kebanyakan dari mereka mengeluh mengenai ukuran dari template itu sendiri, ada juga yang mengeluhkan mengenai variasi kolom dan efek yang digunakan sehingga butuh tenaga extra untuk menentukan pilihan yang tepat.

Jikalau anda mau sedikit saja belajar, hal tersebut sebenarnya sangat mudah untuk diselesaikan. Tidak harus menjadi seseorang yang paham CSS sepenuhnya cukup dengan pembelajaran dasarnya. Saya yakin anda bisa melakukan redesign pada template yang sedang anda gunakan, baik itu mengatur ukuran header, post, sidebar, footer bahkan kode yang lebih rumit pun bisa anda kerjakan dengan mudah. Saya paham kalo anda pasti masih belum tau harus mulai dari mana dan melakukan apa!

Oleh karena itu saya ingin berbagi sedikit ilmu. Jadi simak baik-baik ya. Memang kode HTML itu pasti bisa berdiri walaupun tanpa CSS, namun hal tersebut seperti masakan tanpa bumbu, hambar. Dengan menambahkan kode css kedalamnya, membuat input yang dihasilkan dari kode html akan memberikan warna tersendiri sesuai kode css yang di masukan. Tanpa adanya kode css saya yakin pasti template blogger anda tidak berbentuk alias acak-acakan.

Berikut ini adalah contoh gambaran mengenai elemen kode CSS didalam sebuah template. Saya jelaskan dengan gaya pemahaman saya, jadi kalo ada sedikit kata-kata yang kurang dipahami silakan bertanya:

Redesign bagian Outer-wrapper

Outer-wrapper ini banyak digunakan oleh para pembuat template blogger untuk membungkus semua kode.
#outer-wrapper merupakan kode pembungkus dari semua kode css mulai dari bagian heade, main, post, sidebar hingga footer.
Kode yang digunakan pun tergolong simple dan sedikit.
Contoh kode oute-wrapper:
#outer-wrapper {
Width: 900px;
High: Auto;
Margin: 0 auto;
Padding:…;
Background-color: white;
}
Catatan: Jika anda ingin ukuran header anda lebih lebih maka lakukan pengaturan telebih dahulu pada outer-wrapper ini agar tidak ada kolom yang tertumpuk atau berpindah.
Keterangan: untuk mengubah lebar masih menggunakan perintah yang sama yaitu width, untuk tinggi biarkan secara otomatis untuk menghemat waktu.

Redesign bagian Header

Kebanyakan Blogger menggunakan #header-wrapper untuk mewakili kode yang akan dipangil oleh html, jadi #header-wrapper ini bisa disebut sebagai kode utama untuk bagian header.
#header-wrapper merupakan kode untuk meletakan kode lebar dan panjang header, judul atau nama dan iklan blog anda, dan juga mengatur jarak dengan header dengan kotak lainnya.
Variasi header bermacam-macam mulai dari header dua bagian, header satu bagian, dan masih ada beberapa lagi. Kenapa headernya dua bagian karena header yang semula satu dipecah menjadi 2 dengan ukuran yang berbeda, dimana sisi kiri digunakan untuk menampilkan judul dan deskripsi blog sedangkan sisi kanan digunakan untuk menampilakan barner/iklan.

Sedangkan header dengan satu bagian artinya header tersebut hanya digunakan untuk menampilkan judul dan deskripsi blog dan bisa juga digunakan untuk menampilkan gambar agar terlihat menarik bagi para pengunjung.
Contoh:
#header-wrapper {
Width: 900px;
High: 180px;
Margin:…;
Padding:…;
}
Keterangan: Width digunakan untuk mengatur lebar header sedangkan high digunakan untuk mengatur tinggi header. Untuk header dua kolom memiliki tambahan kode pembungkus, sperti header2, barner atau yang lainnya sesuai dengan pemilik templatenya.
Ingat: Kode #header-wrapper tetap menjadi pusat utamanya, cuma dipecah aja.
Contoh untuk kolom header bagian kiri:
#header {
Float: left;
Width: 180px;
Overflow: hidden;
}

Contoh untuk kolom header bagian kanan:
#header-ads {
Float: right;
Width: 729;
Margin:…;
Padding:…;
Overflow: hidden;
}

Keterangan: 
  • Untuk mengatur posisi kolom kanan maupun kiri menggungakan perintah float: left; atau float: right;.
  • Untuk mengatur lebar kolom masing masing silakan ganti pada point width: 729px; atau width: 180px;.
  • Sedangkan untuk mengatur tinggi silakan lakukan pengaturan pada kode utamanya yaitu #header-wrapper karena tinggi dari kedua kolom yang dipisah tadi akan mengikuti tinggi awal jadi tidak perlu lagi menambahkan kode high:….; kedalam #header maupun #header-ads.

Redesign Kolom main-wrapper

Element main ini tempat dimana postingan yang anda post akan tampil, jadi lakukan pengaturan sedinamis mungkin untuk menarik minat para pembaca. #main-wrapper merupakan kolom/kotak postingan yang didalamnya juga terdapat kolom turunan seperti blog-pager, kolom komentar, kolom latest dan masih banyak lagi.
Ingat sesuaikan lebar main-wrapper ini dengan sidebar agar kolom sidebar tidak berpindah kebawah, tambahkan lebar kedua kolom tersebut dan hasilnya jangan sampai melewati lebar outer-wrapper.
Contoh kode kolom main-wrapper:
#main-wrapper {
Width: 700px;
High: auto;
Margin: …;
Float: left;
}
Keterangan: Ganti nilai pixel dalam widt untuk mengatur lebar kolom main dan jika ingin main ada diposisi kanan gunakan perintah float: right; untuk menganti posisi kolom main.

Redesign Bagian Sidebar Sidebar

Kolom sidebar ini memiliki banyak sekali kegunaan seperti meletakan popular post, label, barner dan masih banyak lagi. #sidebar-wrapper merupakan kode untuk kolom bagian samping, selain kolom main-wrapper tadi, dengan fungsi sebagai tempat untuk meletakan dan menambahkan widget yang sudah disediakan blogger. Variasi letak sidebar bisa diletakan dibagian kiri atau kanan dan juga bisa keduanya.
Contoh Kode Bagian Sidebar:
#sidebar-wrapper {
Width: 200px;
Float: right;
}
Keterangan: sama seperti yang lainya, gunakan width untuk menambah ataupun menguragi lebar sidebar dan untuk menganti posisi sidebar anda gunakan perintah float: left atau float; right.

Redesign Bagian Footer

Kolom footer ini hamper sama dengan kegunaan sidebar namun berbeda dari segi posisi dan letak widget, jika sidebar letak widget kearah bawah, sedangkan footer kearah samping..jadi kaya kebalik ya, tapi memang begitu rumusanya. #footer-wrapper merupakan kode pembungkus sebagai tempat untuk memangil widget yang tersedia diblogger sama halnya seperti sidebar.
Contoh Kode Footer-wrapper:
#Footer-Wrapper {
Width: 900px;
High: auto;
Padding: …;
Margin: …;
Background-color: black;
}
Keterangan: Kode footer ini mirip dengan header hanya berbeda untuk margin, padding dan highnya saja, namun jika ingin menambahkan hal lain pun bisa.

Ingat: mulai dari lebar header, main + sidebar, dan juga footer tidak boleh melebihi lebar outer-wrapper. Pembahasan kali ini saya batasi pada pengaturan lebar dan tinggi template saja, semoga artikel kali ini bisa berguna bagi anda yang malas nyewa jasa design, atau binggung buat mulai dari mana. Terima kasih sudah membaca tulisa saya