mas template

Cara Merubah Lebar Kolom Template

Barangkali ada beberapa dari teman-teman semua yang merasa sangat menyukai suatu template, akan tetapi ada ganjalan yakni lebar kolom yang ada tidak sesuai keinginan kita, baik itu lebar kolom sidebar atau pun mainbar (kolom tempat posting). Ada kalanya lebar kolom dari suatu template di rasa terlalu lebar ataupun terlalu sempit, nah jika anda mengalami hal yang demikian, kali ini saya akan berikan tips buat mengakalinya supaya lebar kolom menjadi sesuai dengan keinginan kita sendiri.

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, ini tentunya terserah kepada si designer template nya sendiri. 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 Banner ataupun nama-nama yang lainnya. 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.

Agar tidak terlalu membingungkan, saya ambil contoh template minima 3 kolom yang bisa di download di sini !.Setelah melihat perkembangannya ternyata template ini banyak yang menyukainya. Jika anda tidak puas dengan lebar kolom pada template tersebut, silahkan deh ikuti tips berikut biar lebar kolomnya sesuai dengan keinginan anda. Dimanakah letak kode-kode untuk mengatur lebar kolom ? saya berikan contoh :
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
} #main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
#sidebar-wrapper {
width: 220px;
float: right;
}
#newsidebar-wrapper {
width: 200px;
float: left;
}
Seperti yang terlihat pada kode-kode diatas, yang mempengaruhi lebar kolom adalah yang saya cetak merah. Width tentu saja dalam bahasa indonesia adalah lebar, jadi gampangkan untuk mengenalinya. 900px adalah nilai lebar yaitu sebesar 900 pixel.

Agar lebih mudah dimengerti, kode-kode diatas saya uraikan :
#header-wrapper {
width:900px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
Ini artinya header-wrapper mempunyai lebar sebesar 900px dan mempunyai border (saya artikan 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, jika ingin lebih tebal anda tinggal tambahin nilainya, atau jika anda menginginkan garis tepi ini tidak ada maka hapus saja kode ini.
#outer-wrapper {
width: 900px;
margin:0 auto;
padding:10px;
text-align:justify;
font: $bodyfont;
}
Ini artinya 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. Jadi dengan kata lain 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 dan ini membuat blog kita menjadi kurang sedap untuk di pandang mata. Jadi apabila anda ingin mengubah lebar salah satu kolom di antara yang tiga, maka lebar dari outer wraper pun harus di ubah dan di sesuaikan.
#main-wrapper {
width: 435px;
margin-left: 20px;
margin-right: 20px;
float: left;
}
Ini artinya 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, apa-apa yang kita 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, contoh 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.
#sidebar-wrapper {
width: 220px;
float: right;
}
Ini artinya kolom sidebar-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, apabila ingin di persempit atau di perlebar, maka kita hanya perlu mengubah nilai pixelnya saja. Cuma apabila 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.
#newsidebar-wrapper {
width: 200px;
float: left;
}
Ini artinya kolom newsidebar-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.

Demikian tadi tutorial singkan mengenai cara merubah lebar kolom template di blog kita. Semoga dapat dimengerti dan selamat mencoba.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

72 comments:

  1. makasih tipnya yang sangat bermanfaat

    ReplyDelete
  2. Saya mau merubah lebar halaman bagaimana ya...gantilcdlaptop.com

    ReplyDelete
  3. saya mau merubah lebar halaman web bagaimana ya gantilcdlaptop.com
    Terimakasih

    ReplyDelete
  4. Terima kasih tipsnya, mau tanya klo kita mau merubah template 3 kolom menjadi 2 kolom saja gemana ya?

    ReplyDelete
  5. wah makasih ya ini sangat bermanfaat...

    ReplyDelete
  6. mas boleh tanya ngak, saya baru ganti templet na kok postingannya terpotong oleh templet ngak full gitu gimana ya biar bisa kayak stadar lagi,ni blog saya becerita.com tolong di bantu mas saya masih bingung baca postingan di atas

    ReplyDelete
  7. klo temple yang bawaan blogger, tinggal masuk costumise trus cari adjust widht nah tingal geser geser aja.

    numpang lapak ngan ni yang mau cari duit dari google adsense.
    BUKAN TIPU ATAU SCAM MAU LIHAT-LIHAT DULU JUGA BOLEH
    PANDUAN STEP BY STEP GOOGLE ADSENSE 24 JAM APROVE
    BAHKAN SAYA YANG NEWBIE PUN KURANG LEBIH 1 JAM.

    ReplyDelete
  8. bermanfaat banget mas, sukses selalu http://onlinebisnis11.blogspot.com

    ReplyDelete
  9. Terima kasih atas tipsnya, saya memang lagi cari info untuk blog saya yang baru. Silakan mampir di www.rahmablog.tk

    trims
    rahma

    ReplyDelete
  10. thank gan,,, ternyata caranya begitu tho,,, tapi kenapa kalau edit kolom postingan dan sidebar kok malah geser kesamping?

    ReplyDelete
  11. kunjungan balik gan,,,, http://softwaremaniapc.blogspot.com/

    ReplyDelete
  12. makasih infonya gan . mampir di blog ane mossidcyborg.blogspot.com

    ReplyDelete
  13. Terima kasih mas tukar link yuk
    http://mortalkimbatjreeng.blogspot.com

    ReplyDelete
  14. saya ko ga bisa ya ga saya pake tmplate lihat di http://arifinsaputra.blogspot.com saya mau kiri kanan jangan ada warna biru tapi harus mentok gimana caranya lebar saya atur

    ReplyDelete
  15. liat-liat blog ketemu ini blog. thanks, bro.

    ReplyDelete
  16. thanks..
    visit pekalongandewe.blogspot.com

    ReplyDelete
  17. This comment has been removed by the author.

    ReplyDelete
  18. mas saya pakai template johny see book sekali pengen mw merubah ukuran template nya tapi kenapa kode-kode yang di atas tidak ada di edit html please mas bantu saya

    ReplyDelete
  19. Kalau untuk mengatur lebar menu/ kategori per halaman termasuk yang mana ya mas?

    ReplyDelete
  20. Untuk interface Blogspot yang baru cara nya lebih mudah,
    Silahkan visit ke nireyonline.blogspot.com, pilih di tab artikel..

    ReplyDelete
  21. thanks maskolis atas infonya..
    kalau boleh follow balik blog saya, untuk yang lain silahkan follow juga blog saya..
    nanti saya follow balik..

    mnafarin.blogspot.com

    ReplyDelete
  22. mo minta bantuannya gan, blog pnyku yang bagian atas melorot kebawah cara agar tampilan naik keatas gmn ya? klo tidak kbrtn kunjungi blog saya hanibi.com, trims sblmnya...

    ReplyDelete
  23. Bagaimana cara mengatur jarak antar sidebar agar lebih rapat seperti sidebar Blog milik Mas Kolis?

    ReplyDelete
  24. This comment has been removed by the author.

    ReplyDelete
  25. mantap gan, mampir juga ke http://www.prediksibola888.blogspot.com/

    ReplyDelete
  26. terimakasih banget sob, koz dengan ini blog saya bisa saya lebarin.. sekali lagi terimakasih ya... BY: Sepatu Olahraga

    ReplyDelete
  27. mas saya minta tolong dikit, saya pakai template mas yg kalau ndak salah Simple Magazine 2. nah saya ada sedikit kesulitan mengatur ukuran kotak posting di halaman khusus postingnya.
    bisa dicek misalnya di: http://risalahans.blogspot.com/2013/12/pohon-besar-antara-yang-dipikirkan-dan.html yg ukuran jarak kanannya terlalu lebar dengan sidebar di halaman tsb. saya ingin memperkecilnya sepertu pada contoh di template Simple Magazine 2 kreasi mas tsb?
    trims bgt sebelumnya ya.

    ReplyDelete
  28. makasih ya infonya. mau tak praktekkan di Butik Hijab Online Isaura Hijabers

    ReplyDelete
  29. untuk menghilangkan garis pemisah antara kolom posting dengan sidebar dan sekaligus merapatkan antara keduanya gmn mas?
    salam...

    ReplyDelete
  30. Thank you mas brow,,, ilmu yang baru dan bermanfaat... salam blogger, mampir k blog ane yaw,,, di tunggu koment"y mas... (y)

    ReplyDelete
  31. wahhh makasih yah mas kolis atas info nya :)
    hehehe bermanfaat banget
    kunjungi balik yah heheh

    http://internetuntuksemuarakyat.blogspot.com/

    ReplyDelete
  32. mantap gan mampir ya http://andri-crotz.blogspot.com/

    ReplyDelete
  33. tq gan atas infonya & sukses selalu gan :)


    PROMOSI

    hello semua para coment gan gan :)
    ayo bergabung bersama kami di website www.senang77.com
    cara mendapatkan uang dengan mudah gabunglah bersama kami..
    kami juga menyediakan bonus turn over 0.3% dan akan di bagikan dalam

    1 minggu dan balance akan masuk kedalam secara otomatisnya


    WWW.senang77.COM
    PENDAFTARAN
    http://senang77.com/Register000.aspx

    Kami juga menyediakan kode referral :)

    http://www.senangpoker.com/?ref=859522

    kami bisa dihunbungi melalui :

    YM : cs.senangpoker@yahoo.com
    FACEBOOK : cs.senangpoker@yahoo.com
    BBM : 764a99d1
    Twitter : senangpoker
    SKYPE : senang.poker


    Untuk anda kami suport dengan 5 bank Lokal : BANK BCA, BANK BNI, BANK

    BRI, BANK MANDIRI, DAN BANK DANAMON.


    TERIMA KASIH
    salam manis :) senang77.com / senang77.net / senang77.info :)

    ReplyDelete
  34. mohon izin mas nyontek ilmu nya,
    mohon di maklumi baru belajar....

    ReplyDelete
  35. ASLI UANG games poker atau domino QQ cewek dan cowok kumpul disini http://goo.gl/qXgFNE
    daftar disini http://www.pokergaruda.com/register.php
    kalau kurang faham boleh add pin bbm 2B0A7611

    ReplyDelete
  36. mas bisa bantu ga mas, cara merubah posisi judul blog yang turun kebawah, apa di marginnya ni
    contohnya judul blog yang kepanjangan TUTORIAL SEO SIMPLE misalnya
    jadi judulnya jadi begini mas
    TUTORIAL SEO
    SIMPLE
    mohon pencerahan mas

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  37. http://humandrills.blogspot.com/2015/03/waoow-google-now-kini-ada-di-semua.html

    ReplyDelete
  38. Kunjung balik ya :)
    http://goo.gl/QSptyo

    ReplyDelete
  39. udah tak coba ganti ukuran kolom artikel tapi kok tetap gak berubah yak mas ?

    ReplyDelete
  40. saya tidak menemukan code #header-wrapper, #outer-wrapper ,maupun yang lainnya pada script HTML, bagaimna solusinya gan?
    saya menggunakan teplate hasil download gan, terima kasih..

    ReplyDelete
  41. This comment has been removed by the author.

    ReplyDelete
  42. Mantap tip nya bro, http://cara-banicyber.blogspot.com

    ReplyDelete
  43. artikelnya bagus gan, kunjungi juga website saya di " CARA UNTUK MEMPERBESAR PAGE RANK WEBSITE ATAU BLOGSPOT arga yudha | web "

    atau link.nya di http://www.argayudhaadhiprama.com/bagaimana-cara-memperbesar-page-rank-website-blogspot/

    trimakasih dari arga yudha adhiprama






    ReplyDelete
  44. Berkunjung juga ke http://ahdaanarchykids.blogspot.co.id/

    ReplyDelete
  45. Berkunjung juga ke http://ahdaanarchykids.blogspot.co.id/

    ReplyDelete
  46. Sehat itu murah, sehat itu milik kita semua. Bagi sebagian orang sehat itu mahal, memerlukan banyak biaya dan perawatan, tetapi bila anda rajin dan sering menggunakan alat Terapi Ion elektrik rendam kaki, sehat itu murah dan mudah. Oleh karena itu penting bagi anda untuk menjaga kesehatan semenjak dini dengan secara rutin membuang racun dan toksin dari tubuh anda dengan menggunakan alat terapi ion elektrik rendam kaki.
    Terapi Ion
    Terapi Ion Rendam Kaki Air Garam
    Peluang Usaha Rumahan
    Terapi Ion Elektrik Rendam Kaki Detox
    Manfaat Terapi Ion Elektrik
    Terapi Ion Elektrik
    Terapi Kesehatan Murah
    Peluang Usaha Modal Kecil
    Harga Paket Alat Terapi Ion Elektrik
    Pengedar Alat Terapi Ion Di Malaysia

    ReplyDelete
  47. info yang saya butuhkan,,trmksih mas

    ReplyDelete
  48. makasih infonya gan,,,siap dicoba

    ReplyDelete
  49. cara menghilangkan kolom sidebar kiri pada theme twenty sixteen bagaimana ya ?, makasih banyak yang mau membantu !

    ReplyDelete
  50. cara memperluas templete simplify 2 gimana, coba liat templete saya agak kecil ukuran tampilan postingannya, kasih info balek ya

    ReplyDelete
  51. Terimakasih, akhirnya ketemu juga caranya
    www.cariduitonline.net

    ReplyDelete
  52. makasih tipnya yang sangat bermanfaat
    http://djexotismabes.blogspot.co.id/

    ReplyDelete
  53. makasih tipsnya...kunjungan baliknya ya...suwun

    http://dietaktif.com

    ReplyDelete
  54. Trimakasih gan atas bantuanya kunjungi website pulsa sa juga ya di http://www.pt-nikireload.id/

    ReplyDelete
  55. Waduh ternyata untuk merubah lebarnya harus ketemu bahasa HTML ya, Huaaa bisa ga ya? mari kita coba

    ReplyDelete
  56. gimana kalo untuk mengubah, dari 3 kolom menjadi 2?

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger