2/27/10

Cara Merubah Lebar Kolom Pada Template


Kadang kita kurang puas dengan tampilan template yang telah disediakan oleh para designer template , itu wajar namanya juga manusia , bagus kata yang lain belum tentu bagus kata kita. Nah kali ini saya akan berbagi tentang Cara Merubah Lebar Kolom Pada Template Blog , ini juga realisasi janji saya pada posting sebelumnya tentang Membuat Scroll Pada Archieve Blog. minggu yl.

Saya senang dengan template ini..namun ada yang kurang sreg di hati, aslinya dulu lebar sidebar ini kecil hanya 390 saja belum lagi setelah dibagi 2 pada sidebar dibawahnya. Keinginan saya agar pada sidebar itu masuk 3 banner ukuran 125x125 tapi gak bisa hanya masuk 2 . akhirnya lebarnya dirubah sehingga 3 banner tersebut bisa masuk seperti yg tampak sekarang ini .

Sebelum merubah kolom pada template .. ada baiknya kita tahu dulu struktur sebuah template atau css yang mengatur lebar dari template itu, biasanya struktur atau css sebuah template mempunyai rumus sbb. :

#header-wrapper = #outer-wrapper = #footer-wrapper = #main-wrapper + Margin + #sidebar-wrapper.

#Outer-Wrapper = Main-wrapper + Sidebar-wrapper+margin

#Sidebar-Wrapper = Sidebar-left+margin+sidebar-right+margin

Dari rumus diatas diketahui bahwa :

  1. Header-wrapper = outer-wrapper = footer-wrapper  ( angkanya tetap tak dirubah yaitu 960px) . Pada template ini untuk bagian header ada juga  #navbar-iframe 980px dan body 980px ( bila dikaitkan dengan header wrapper diatas yg hanya 960 berarti ada margin sebesar 20 px) , angka 980 ini abaikan saja jika kita tak merubah lebar blog secara keseluruhan.

  2. #outer-wrapper atau blog-wrapper adalah area yang disediakan untuk kolom Main-wrapper (halaman posting) + Sidebar-wrapper (tempat  menyimpan gadget yang dipinggir), dengan ini bila kita mau merubahnya ,maka halaman posting atau sidebarnya juga mesti dirubah , disini saya juga tak merubah angkanya tetap 960px, 

  3. Sidebar-wrapper adalah lebar seluruh jumlah kolom atau sidebar yang ada plus margin (bisa 2 atau 3 sidebar/kolom tergantung templatenya) , contoh template blog ini disamping sidebar utama ada 2  sidebar dibawahnya yaitu sidebar left dan sidebar right

  4. Sampai disini.. bingung gak ??.. kalau bingung..ya sama , saya juga bingung gimana nulisnya antara apa yang saya lakukan kemudian dituangkan dalam tulisan.. haha.. mendingan langsung ke prakteknya aja ya , ini yang saya lakukan :

Cara Merubah Lebar Kolom Pada Template :

  1. Masuk ke Dashboard
  2. Pilih Layout , lalu klik Edit HTML
  3. Tak usah centang  Expand Widget Template, biar gak pusing
  4. Jangan lupa Backup template dulu dengan  Download Full Template
  5. Untuk memudahkan pencarian , pakai saja Ctrl +F , terus ketik kata yang dicari dikotak yang disediakan, lalu klik next. 
  6. Perhatikan sebagian kode Css dibawah ini ( saya copy yang pentingnya saja) yang diganti adalah angka yang warna merah
  7. Kalau sudah jangan lupa simpan template

Contoh sebagian css yang dirubah :

#navbar-iframe{  body{  width:980px;
#navbar-iframe body { width: 980px; }
#header{ background:#111 ;width:960px;
#outer-wrapper{ width:940px;

---Angka2 diatas tidak ada yang dirubah) -----

#main-wrapper{
float:left; width:570px;  --> ganti 500px

#sidebar-wrapper{
float:right; width:350px;  --> ganti 410px

#midsidebar-wrapper{
width:350px;   --> ganti 410px

#lsidebar{
float:left; width:150px;  --> ganti 190px

#rsidebar{
float:right; width:150px;   --> ganti 170px

.post{
float:left; width:560px;    --> ganti 500px

.comments{
float:left; width:560px;   --> ganti 490px

#comments-block{
width:550px;      -->ganti 470px
float:left;

.sidebar .widget{
float:left; width:330px;    --> ganti 400px

.sidebar .widget{
float:left; width:330px;   --> ganti  390px

#credits {
    width: 960px;   --> Tetap 960px
    height: 30px;

Nah begitulah  Cara Merubah Lebar Kolom Pada Template Blog ini , sehingga intinya pada sidebar atas bisa masuk 3 banner ukuran 125x125 , kemudian 2 sidebar  dibawahnya mempunya lebar  190 px utk  kiri  dan 170 px untuk yang kanan. Jika berminat ikuti saja caranya tinggal sesuaikan angkanya saja.. jangan tanya kenapa .. da saya juga bingung.. haha.. selamat mencoba semoga berhasil

Saung Web


  1. Thanks telah mampir, yo kita saling vote dan comment..
  2. Bila berkenan tolong bagikan dengan tombol share di atas.
  3. Gratis langganan artikel blog ini, silahkan klik Disini, atau masukan email disidebar yg telah disediakan

Sobat sedang membaca artikel Cara Merubah Lebar Kolom Pada Template, bila berkenan silahkan share artikel ini dengan tombol share di atas. Bila mau COPAS untuk di blog sobat, dimohon meletakkan link aktif sebagai Sumbernya dengan copy kode di bawah ini.

Related Post:

91 comments:

  1. what a wonderfull moment be the first here

    ReplyDelete
  2. masih menikmati eufhoria jadi yang pertama disini

    ReplyDelete
  3. sederhana namun sangat bermanfaat..tambah lebar kolom penting agar kita bisa leluasa berkreasi dan efektivitas materi tentunya.

    ReplyDelete
  4. Wah.. ni blogspot lagi ya sob,, mantab article nya :D

    ReplyDelete
  5. Teknik yang bagus kawan.thanks

    ReplyDelete
  6. @ munir ardi : hohooy makasih daeng.. pokoknya dah saya penuhi deh..
    @ omahus : silahkan oom blognya keren euy
    @ sittin : yups sob.. silahkan dicicipi
    yahoo Vs google : yups sob..
    @ tomo : semoga aja ada manfaatnya

    ReplyDelete
  7. Mantap sob, dpt ilmu lg niy..trims atas sharex

    ReplyDelete
  8. Horeee... mantaaap ... punyaku juga berhasil nih.. haha.. kini bisa masuk 3 banner di atas.. siipp-siiiipp

    ReplyDelete
  9. Siap menyimak sob, sekalian nyoba belajar blogspot.. bolehkan sob??

    ReplyDelete
  10. wah thx nih tutorialnya, tp klo untuk template lain jauh beda ga ya caranya ??

    ReplyDelete
  11. salam sobat
    trims tutorialnya
    ternyata ada cara merubah lebarkolom pada template...tapi harus sesuai ya mas,,

    ReplyDelete
  12. tHanks sObat, udh dI postiNg,.
    sEkalian bLackwaLkiNg mAlam nI sOb.,.

    ReplyDelete
  13. Makasih bang saung,rupanya jogo modif template juga ya,mantep2x.

    ReplyDelete
  14. Sip... sepertinya punya saya sudah cukup lebar, hehe...

    ReplyDelete
  15. Huahahahaha... huabat--huebat...makasih.. makasih.. berhasil juga akhirnya kini .. 3 banner dah masuk n bisa modif sendiri sekehendak kita..

    ReplyDelete
  16. @ Ratasoe : sama2 sob
    @ Yahoo Vs Google : bole3 sob silahkan
    @ Lifstyle : Kalau rumusnya kayaknya tetap sama sob.. yg penting rumusnya itu lho
    @ Nura : Yups mbak pokoknya perhatikan rumusnya aja.. yg penting bila dijumlahkan semuanya ya harus sama dengan lebar blog keseluruhan.. trus kalau yg satu di rubah berarti yg lain ikut dirubah pula, intinya satu di perbesar berarti yg lain harus diperkecil sesuai angka itu
    @ Ngeposting Ni yee : yups sob makasih
    @ mr xxx : hanya otodidak aja sob.. ini bukan tutorial hanya pengalaman aja yg sy lakukan.. kalau gak diposting gigi .. nantinya kalau perlu lagi .. suka lupa.. haha
    @ kang sugeng : Punya akang mah dah bagus\
    @ iklan baris : yups siip

    ReplyDelete
  17. Wah, sob, nambha banyak yang komen :D
    o ya sob, mohon maap kalo saya lancang. bolehkah saya jadi blog guest di bog anda? kalo iya, saya akan segera kirim artikel saya ke email anda.

    judul artikel saya

    3 Tools dari Google yng wajib dimiliki Bloger

    atau

    Untungkah Jadi Blog Guest?

    Maap sob, terlalu panjang komennya, kalo diterima mhon sya dikasi tahu ya :D

    ReplyDelete
  18. hmm..
    ini dia yg saya cari sob :D
    blog saya emg klihatan smpit sih.. :(
    di coba dlu ya bro...

    ReplyDelete
  19. punya sidebar yang lebar memang mantappp Kang.. bisa dipasangin apa aja, trus ngga susah kalau mau membagi jadi sidebar dua kolom...

    lebih baik mana Kang??? Main wrapper yg lebar trus sidebar sempit, apa Main Wrapper sempit tapi sidebar yg dilebarin????

    ReplyDelete
  20. @ Yahoo Vs Google : Ok sob dengan senang hati ... kirim aja..ke : saungweb@gmail.com
    @ Rodyz : Silahkan sob dicoba
    @ Seputar internet : Soal itumag terserah orang nya sob.. menurut saya mah disesuaikan aja mainwrapp juga penting.. toh disana kan tempat conten utama
    @ Gostech : Yups sob makasih

    ReplyDelete
  21. mantap bos..mo nanya nih bos..blog ane tadinya center..kok sekarang berubah kekiri ya posisinya..gimana balikinya..thank

    ReplyDelete
  22. @ virtual : makasih sob atas upportnya
    @ Kang Ozi : Silahkan kang
    @ Easy way tobe clickers : Segera meluncur sob

    ReplyDelete
  23. thank for the info, how to make 4 column 3 lines?

    ReplyDelete
  24. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  25. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  26. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  27. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  28. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  29. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  30. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  31. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  32. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  33. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  34. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  35. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  36. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  37. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  38. Numpang nitip lapak y gan/sis..
    Semua info yang kamu cari, mulai dari jokes, true story seperti : Di sukai oleh arwah PUTERI KERAJAAN SRIWIJAYA, KISAH NYATA BERTEMU DENGAN POCONG, info gadget, aplikasi java dan komputer, modifikasi sony ericsson J105 naite, sprti : full akses ke naite, menghidupkan radio tanpa headset, megabass to clearbass, dll.
    Kamu juga bisa menyumbang artikel apa saja yang bermanfaat lalu kirim email ke positifadi.adm@gmail.com

    Kamar Bujang|Femalepedia|Animecities|Rundomain|TrikDapatDolar|Hikaru no Fans

    ReplyDelete
  39. thanks sob atas infonya, tapi kok ditemplate bawaan blogger yg ane pakai gk ada kode yg antum sebut diatas. Tlng pencerahannya. Sekalian bgi sobat blogger yg berkunjung di blog ini, ane mau share sdikit tips membuat read more dan posting dri hp soner k610i atau w660i di http://this-4-all.blogspot.com/2010/09/read-more-membuat-read-more-dan-posting.html#more. Thanks

    ReplyDelete
  40. thanks sob atas infonya, tapi kok ditemplate bawaan blogger yg ane pakai gk ada kode yg antum sebut diatas. Tlng pencerahannya. Sekalian bgi sobat blogger yg berkunjung di blog ini, ane mau share sdikit tips membuat read more dan posting dri hp soner k610i atau w660i di http://this-4-all.blogspot.com/2010/09/read-more-membuat-read-more-dan-posting.html#more. Thanks

    ReplyDelete
  41. @ This4all : memang tiap mplate kadang berbeda sob.. tapi garis besarnya sama..

    ReplyDelete
  42. Free Anime Blogger Template|Blogger Skin|Blogger Themes|Layout For Blogspot

    ReplyDelete
  43. Free Download Blogger Template|Free Download Template Blogger|Template For Blogspot

    ReplyDelete
  44. Free Blogger Skin|Blogger Template|Template Blogger|Anime Blogger Template

    ReplyDelete
  45. Free Blogspot Layout|Layout Blogspot Free|Template XML Blogspot|Blogger XML Theme

    ReplyDelete
  46. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  47. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  48. Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme|Layout Blogspot Free

    ReplyDelete
  49. Download Template Blogger|Blogspot Themes|Template XML|Layout For Blogspot

    ReplyDelete
  50. Free Anime Blogger Template|Blogger Skin|Blogger Themes|Layout For Blogspot

    ReplyDelete
  51. Free Download Blogger Template|Free Download Template Blogger|Template For Blogspot

    ReplyDelete
  52. Free Blogger Skin|Blogger Template|Template Blogger|Anime Blogger Template

    ReplyDelete
  53. Free Blogspot Layout|Layout Blogspot Free|Template XML Blogspot|Blogger XML Theme

    ReplyDelete
  54. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  55. Layout Blogspot Free|Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme

    ReplyDelete
  56. Template XML Blogspot|Free Blogspot Layout|Blogger XML Theme|Layout Blogspot Free

    ReplyDelete
  57. Download Template Blogger|Blogspot Themes|Template XML|Layout For Blogspot

    ReplyDelete
  58. kwkwkwkwkwkwkwkw... otaknya gila sampe yang kek gituan di dapatnya. SEMUA JENFOL untukmu sob... ^_^

    ReplyDelete
  59. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  60. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  61. Naruto 546|Naruto Manga 547|Naruto Shippuden Manga 548|Naruto 549 Manga|Naruto 550 Spoiler

    ReplyDelete
  62. kunjung balik gan
    and comment di blog saya
    ^^
    http://naxzapram.blogspot.com

    ReplyDelete
  63. makasih boz, saya coba memang manjur

    ReplyDelete
  64. mau aku coba mas,tp tipsnya mangztab jaya...thanks yaa

    ReplyDelete
  65. mau aku coba mas,tp tipsnya mangztab jaya...thanks yaa

    http://gitarchordshack.blogspot.com

    ReplyDelete
  66. Mantabb Bozz . . . Izin praktek di Blog Ane . . . Hatur Nuhun Bozz :)

    http://anakbrb.co.cc
    http://www.virtapay.com/r/ndunks

    ReplyDelete
  67. terima kasih tutorialnya sangat bermanfaat

    ReplyDelete

Bagi sobat-sobat silahkan comment disini, Insya Allah saya comment balik di blog anda. Trims atas kerjasamanya

Langganan Artikel

Artikel Gtais : :

Enter your email address:

Delivered by FeedBurner

Total Kunjungan

 

Copyright 2008 All Rights Reserved Revolution Two Church theme !, Converted into Blogger Template by Bloganol dot com ! Modified by Saung Web ! , On Blogger