Cara Mengubah Ukuran Lebar Postingan Template Blog

Cara mengubah ukuran lebar postingan template Blog-Mengatur dan mengubah ukuran lebar/tinggi halaman, posting, template  blog sangat penting untuk mengubah ukuran secara keseluruhan. Bila kita tidak merasa cocok dengan ukuran ruang template yang kita pakai, kita bisa mengatur dan mengubahnya. Untuk mengedit template blog, Anda perlu mengetahui berapa ukuran lebar dan tinggi elemen-elemen yang ada di blog. Untuk mengetahui ukuran lebar dan tinggi posting, sidebar dan header blog cukup mudah.

Cara Mengubah Ukuran Lebar Postingan Template Blog

Cara mengatur lebar postingan atau mengetahui ukuran lebar header, tinggi header, lebar template, lebar sidebar dan footer pada blog. Maka Anda harus mengetahui dibagian mana yang harus dirubah/edit. Sebagai pengenalan awal, Anda harus mengenal dulu elemen dalam susunan CSS template yang disebut dengan wrapper. Mengetahui ukuran lebar header, tinggi header, lebar postingan, sidebar, footer atau lebar template secara keseluruhan adalah hal yang sangat penting untuk diketahui jika Anda seorang blogger sejati. Yukk kita kenalan lewat gambar berikut!.

Cara Mengubah Ukuran Lebar Postingan Template Blog

Dari gambar di atas Anda bisa lihat yang mana lebar postingan, lebar template, header. Sekarang Anda mau mengubah yang mana?. Jika sudah tahu apa yang mau diubah pada blog, silahkan buka blog Anda. Klik "Template" pilih "Edit HTML" terus centang dulu tanda expannya agar tidak hilang data yang ada di HTML. Kemudian carilah kode di bawah ini dengan cara tekan CTRL+F, lalu salin kode berikut ini.
#header-wrapper{
Cari kode width dan height apa yang mau diubah sesuai keinginan Anda. Ingat: "kode HTML setiap blog beda-beda" tidak ada yang sama persis. Jadi cari aja kode yang mirip-mirip dengan #header-wrapper{, jika sudah ketemu, carilah kode apa yang mau dirubah. Berikut penjelasan dari kode HTML blog yang mau dirubah.

1. Outer-wrapper (UKURAN BLOG KESELURUHAN)
Maksudnya adalah lebar/ukuran template secara keseluruhan dimana didalam outer-wrapper ini terdapat bagian header, posting, sidebar dan footer. Kode HTML-nya bisa berupa :  #outer-wrapper, #outer-wrap atau #outer

2. Header-wrapper (NAMA/JUDUL BLOG)
Pada beberapa template bagian header ini ada juga yang terbagi dari 2 seperti pada template Saya ini, maka kode CSS-nya juga ada 2 seperti ini #header dan #header2. Yang membedakan posisinya adalah float right dan float left. Ukuran lebar menu navigasi yang ada di bawah atau di atas header juga biasanya sama. Kode HTML-nya bisa berupa : #header-wrapper, #header-wrap atau #header

3. Content-wrapper (LEBAR POSTINGAN)
Jika pada template Anda tidak terdapat kode ini, berarti untuk area posting dan sidebar pengaturan CSS-nya ada pada bagian /* -----MAIN -----  */. Kode HTML-nya bisa berupa : #content-wrapper, #content-wrap atau #content.

4.   Main-wrapper (AREA POSTINGAN)
Pada bagian main-wrapper ini adalah area posting Anda berada. Kode HTML-nya bisa berupa : #main-wrapper, #main-wrap atau #main.

5. Sidebar-wrapper (GADGET/IKLAN)
Pada template sidebar biasanya lebih dari satu. Jadi boleh jadi dalam template ada beberapa kode sidebar yang ditulis secara urut seperti #sidebar-wrapper, #sidebar1-wrapper atau #sidebar1 dan #sidebar2. Kode HTML-nya bisa berupa : #sidebar-wrapper, #sidebar-wrap atau #sidebar.

6.  Footer-wrapper
Kode HTML-nya bisa berupa : #footer-wrapper atau biasanya juga terdapat dibawah kode /* -----Footer Content----- */ atau /* -----Footer Wrapper----- */.

Setelah mengenal elemen dan tahu kode HTML wrapper blog Anda seperti yang Saya jelaskan di atas, berikutnya Anda dapat mengubah atau mengedit lebar dan tinggi dari masing-masing elemen wrapper tersebut. Caranya mudah saja, Anda tinggal memperhatikan kode HTML-nya (cari yang mirip-mirip pada blog Anda) jika sudah ketemu silahkan ubah pada bagian width atau height. Berikut contoh salah satu kode HTML blog Saya. 

/* Main containers */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 630px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;    
}
#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
/* Post */
.post{
width: 600px;
padding: 15px;
border: 1px solid #E0E0DE;
background: #FFF;
font-family: Helvetica, sans-serif;
margin-bottom: 20px;
}
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.

Jika template yang Anda gunakan masih bawaan dari dari blogger. Maka cara mengubahnya sudah dimudahkan oleh pihak blogger. Untuk mengedit template blog tidak perlu harus melakukan edit template secara manual seperti template yang Saya jelaskan di atas. Melalui perancang template, maka Anda dapat dengan mudah untuk menyesuaikan template blog dengan mudah. Berikut cara mudah mengatur/merubah ukuran lebar template bawaan dari Blogger :

1. Login ke Blog Anda

2. Kemudian klik Template -> Sesuaikan -> Sesuaikan Lebar, kemudian aturlah sesuka Anda.

Cara Mengubah Ukuran Lebar Postingan Template Blog

3. Jika sudah selesai mengatur, klik "Terapkan ke Blog".

4. Klik "simpan perubahan".

5. Selesai.

Namun jika Anda ingin mengubahnya dengan cara manual, maka caranya sama dengan cara yang sudah Saya jelaskan di atas. Ubah ukuran lebar dan tinggi melalui "Edit HTML" Blog Anda. Cari kode HTML-nya dan ingat bagian mana yang mau dirubah, sehingga Anda dapat dengan mudahnya oprek-oprek template Blog sesuai yang Anda inginkan untuk mempercantik tampilan blog.
Selamat Mencoba!.





Add Your Comments

Disqus Comments