Cara Mengatur Ukuran lebar Template Blog. Tutorial www.seocips.com kali ini tentang cara mengatur lebar template blogger. Anda pastinya mempunya suatu alasan jika ingin mengatur ukuran template blog anda, misalnya karena anda melihat lebar template anda yang kecil ataupun sebaliknya template anda terlalu lebar atau juga anda ingin mengatur lebar postingan blog anda?. Untuk mengetahui lebar kolom suatu template, kita bisa mengenalinya melalui style sheet CSS nya. Akan tetapi tentu saja ada perbedaan antara satu template dengan template yang lainnya.

Biasanya yang menjadi perbedaan hanya pada bagian penamaannya saja, semua tergantung pada pembuat template. Sebagai contoh untuk bagian header, jika menurut standar template blogger di dalam style sheet CSS nya di namakan header, akan tetapi untuk template-template hasil buatan designer lain di luar blogger ada yang menamakan kepala ataupun nama-nama karangannya yang lainnya. Baca juga : cara memasang slider otomatis terbaru.

Cara Mengatur Ukuran lebar Template Blog

Sebuah nama tentu tidak akan berpengaruh terhadap hasil yang di dapat, nama ini dipakai hanyalah agar mudah untuk di ingat atau di kenali oleh sang pemakai template apabila ingin melakukan editting template.

Mengatur / Mengubah Lebar Template Blog


Bila anda hendak merubah ukuran template, anda harus menentukan pada posisi mana yang akan anda rubah. Misalnya berikut ini adalah kode css yang perlu anda atur untuk mengatur ukuran atau lebar template blog anda:

#header-wrapper
#outer-wrapper
#main-wrapper
#sidebar2-wrapper
#sidebar1-wrapper

Agar lebih mudah dimengerti, kode-kode diatas diuraikan :
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Keterangan : header-wrapper mempunyai lebar sebesar 900px dan mempunyai border ( border adalah bingkai atau garis tepi) sebesar 1 pixel dengan garis yang solid (solid = garis penuh. dashed = garis putus-putus. dotted = garis berupa titik-titik) dengan warna border yang bisa di ubah-ubah (pada bagian font dan warna). Header-wrapper adalah hanya penamaan saja, tidak mutlak. Jika di ganti dengan nama kepala juga tidak apa-apa. width:900px; berarti lebarnya sebesar 900 pixel. nah nilai 900 pixel inilah yang bisa di ubah sesuai keinginan anda, mau ditambah nilainya biar lebih lebar, atau di kurangi biar lebih kecil. Akan tetapi saran saya, nilai dari header ini harus sama dengan nilai dari lebar body agar terlihat bagus. border:1px solid $bordercolor; adalah agar bagian header mempunyai garis tepi sebesar 1 pixel.

#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}

Keterangan: outer-wrapper mempunyai lebar sebesar 900px, jarak sela sebesar 10 pixel dengan align nya adalah rata kiri-kanan dan jenis huruf yang bisa di ubah-ubah melalui panel huruf dan warna. Outer wrapper hanyalah nama saja. width:900px; berarti lebarnya 900 pixel. 900 pixel ini adalah lebar yang di sediakan untuk kolom-kolom yang ada, sebut saja dalam hal ini kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper.

Outer wraper adalah hasil penjumlahan lebar kolom main-wrapper, sidebar-wrapper, dan newsidebar-wrapper. Apabila anda memasukan content yang melebihi lebar kolom masing-masing, maka secara otomatis pula melebihi spek dari lebar yang di sediakan oleh outer wraper dan yang terjadi adalah salah satu kolom akan melorot ke bawah, Aapabila anda ingin mengubah maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.

#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}

Keterangan : kolom main-wrapper mempunyai lebar sebesar 435 pixel dengan margin kanan sebesar 20 pixel, margin kiri 20 pixel dan kolom ini di letakan sebelah kiri. Main-wrapper adalah kolom halaman posting, semua yang anda posting maka akan masuk ke halaman ini. width: 435px; berarti lebar kolom ini sebesar 435 pixel, tapi karena menggunakan margin-left dan margin-right, maka lebar kolom sebenarnya adalah sebesar 475 pixel. Akan tetapi yang 40 pixel hanyalah jeda saja agar batas kolom menjadi terlihat tidak bersentuhan.

Apabila anda merasa kolom ini terlalu sempit atau kekecilan, maka anda bisa menambahkan nilai, misalnya 550 pixel. Apabila anda berniat merubah kolom ini, kolom outer-wraper pun harus di tambah nilainya. contoh tadi apabila main-wrapper ingin menjadi 550 pixel, maka 550px-475px=75px. ini berarti kolom outer-wraper harus di tambah sebesar 75px, jadi 900px+75px=975px.

#sidebar2-wrapper {
width: 220px;
float: right;
}

Keterangan : sidebar2-wrapper mempunyai lebar sebesar 220 pixel dan di tempatkan sebelah kanan layar. Kolom sidebar-wrapper adalah kolom sidebar atau kolom tempat di mana kita menyimpan berbagai aksesoris atau yg lainnya. width: 220px; berarti mempunyai lebar sebesar 220 pixel, Jika anda ingin persempit atau di perlebar, maka anda hanya perlu mengubah nilai pixelnya saja dan apabila anda telah merubah nilai kolom ini, jangan lupa untuk mengubah nilai space yang di sediakan oleh outer-wraper. contoh : apbila kolom ini ingin diperbesar menjadi 250pixel maka tambahan pixel adalah sebesar 30 pixel, nah jangan lupa untuk menambahkan pula pada kolom outer-wraper.

#sidebar1-wrapper {
width: 200px;
float: left;
}

Keterangan : sidebar1-wrapper mempunyai lebar kolom sebesar 200 pixel dan di tempatkan pada layar sebelah kiri. Seperti halnya sidebar-wrapper, kolom newsidebar-wrapper pun adalah tempat menyimpan berbagai aksesori ataupun blog tool. kolom ini di buat agar kita bisa lebih banyak memuat berbagai aksesori yang kita inginkan. Kolom newsidebar-wrapper ini lebarnya sebesar 200px, nah bila berniat merubahnya maka tinggal merubah nilai pixelnya saja, tapi jangan lupa untuk menambahkan pula pada kolom outer-wraper.

Sekian mengenai tutorial Cara Mengatur Ukuran lebar Template Blog yang dapat dibagikan oleh www.seocips.com semoga tutorial diatas mudah untuk anda pahami dan selamat mencobanya.
5 Komentar untuk "Cara Mengatur Ukuran lebar Template Blog"

Nyimak Gan...kebetulan lagi otak atik template nih...
Terimakasih

gan kalo untuk mengatur yang versi responsive yang nanti keluar di hp gimana ya? sama atau beda??soalnya ditempat saya masih kurang lebar. pengennya saya pentokin aja biar lebarnya maksimal gimana? coba cek disini gan _http://www.kesehatan-alamku.blogspot.com

thanks atas respon dan infonya gan mohon bantuannya

Terima kasih mas uraiannya sangat mudah untuk dimengerti...

Sangat mudah untuk dipahami,terima kasih gan sudah berbagi