Cara Merubah Lebar Kolom Pada Template Blog

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

http://punya-doni.blogspot.com/2011/07/cara-merubah-lebar-kolom-pada-template.html

Posted in: blogger