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 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!.
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.
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!.
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.