Monday, May 16, 2011

Cara Merubah Lebar Kolom Pada Template

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

ADS HERE

0 Comment:

Post a Comment

waiting for his coming holy month of Ramadan