Pages

Cara Gampang Mengubah Ukuran Lebar Template Blog

Merubah ukuran lebar template blog memang biasanya perlu, entah itu agar bisa memuat berbagai ukuran iklan atau agar terlihat rapi. Seperti yang saya alami beberapa minggu kemarin, saya juga sedikit merubah ukuran template blog ini untuk dimodifikasi.


Nah, langkah awal untuk merubah ukuran template adalah anda harus mengetahui dulu bagian-bagian atau elemen CSS yang ada di blog entee, elemen atau bagian tersebut disebut Wrapper. Sebagai contoh adalah saya menggunakan template blog saya sendiri, berikut gambarannya.



Nah, dari gambar di atas saya jelaskan dulu definisinya satu-persatu :
1.  Outer-wrapper : pada template ditandai dengan kode CSS #outer-wrapper, #outer-wrap atau #outer. Maksudnya adalah lebar/ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header, posting, sidebar dan footer.
 
2.    Header-wrapper : pada template ditandai dengan kode CSS #header-wrapper, #header-wrap atau #header. Pada beberapa template bagian header ini ada juga yang terbagi dari 2 seperti pada template saya ini, maka kode CSSnya juga ada 2 seperti ini #header dan #header2. Yang membedakan posisinya adalah float right dan float left. Ukuran lebar menu navigasi yang ada dibawah atau diatas header juga biasanya sama.
 
3.   Content-wrapper : pada template ditandai dengan kode CSS #content-wrapper, #content-wrap atau #content. Jika pada template anda tidak terdapat kode ini, berarti untuk area posting dan sidebar pengaturan CSSnya ada pada bagian /* -----   MAIN   -----  */.
      Untuk content sendiri ada 2 yaitu #main-wrapper dan #sidebar-wrapper, biasanya ini dipisahkan oleh paging dan margin, ini akan anda temui di setiap elemen .
      Kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam. Misalkan padding: 6px 8px 6px 6px;  maka yang dimaksud adalah padding-top 6px, padding-right 8px, padding-bottom 6px dan padding-left 6px. Padding adalah jarak antara teks atau image ke tepi batas elemen wrapper. Sedangkan Margin biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin. 
 
4.  Main-wrapper : pada template ditandai dengan kode CSS #main-wrapper, #main-wrap atau #main. Nah pada bagian main-wrapper inilah area posting anda berada.  
       Jika ingin merubah lebar halaman postingan saja cari kode berikut ini;

      #main-wrapper {
Dibawahnya ada kode seperti ini

width:507px;

*Ganti semua angka 507 dengan ukuran anda agar sesuai dengan lebar template yang anda rubah tadi.
 
5.   Sidebar-wrapper : pada template ditandai dengan kode CSS #sidebar-wrapper, #sidebar-wrap atau #sidebar. Pada template tertentu sidebar terkadang juga ada lebih dari 1. Jadi boleh jadi dalam template ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper, #sidebar1-wrapper atau #sidebar1 dan #sidebar2. 
      Jika ingin merubah lebar sidebar saja cari kode berikut ini;

       #sidebar-wrapper {
Dibawahnya ada kode seperti ini

width:362px;

*Ganti semua angka 362 dengan ukuran anda agar sesuai dengan lebar template yang anda rubah tadi. 
 
6.   Footer-wrapper : pada template ditandai dengan kode CSS #footer-wrapperatau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */.  
 
Dan jika semuanya telah selesai tinggal klik simpan template.
Ingat, cara ini hanya untuk template yang custom (bukan bawaan dari blogspot.com)  
sedangkan jika kalian memakai template bawaan dari blogspot anda tinggal mengaturnya di  Template - pilih Sesuaikan.

0 komentar:

Follow by Email