Sekarang pertanyaannya apa bisa template itu lebarnya ditambah sekaligus menambah kolom ?, jawabnya tentu saja bisa. Saya akan tunjukan bagaimana caranya menambah lebar kolom template sekaligus menambah kolom baru.
Silahkan anda Log In di Draft Blogger
Dalam Dasbor masuk Tata Letak -> Edit HTML
Jangan centang Expand Widget Template
Kemudian anda cari kode seperti ini (sebagai catatan penamaan kode untuk tiap template mungkin saja berbeda, Tapi pada dasarnya sama).Sebagai contoh kode ini diambil dari template Minima :
#header-wrapper {
width:660px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Footer
----------------------------------------------- */
#footer {
width:660px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Untuk merubah lebar template, anda cuma tinggal merubah angka yang di tandai warna merah. Terserah anda ukurannya mau berapa. Sebagai contoh saja, saya akan merubah ukuran dari angka-angka yang ditandai warna merah, menjadi seperti ini :
#header-wrapper {
width:940px;
margin:0 auto 10px;
border:1px solid $bordercolor;
}
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
/* Footer
----------------------------------------------- */
#footer {
width:940px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Setelah anda merubah ukuran seperti di atas, otomatis sekarang template anda lebarnya telah bertambah. Tetapi , karena main dan sidebar wrapper belum diubah ukurannya, otomatis template anda mempunyai space yang kosong. Untuk menambah kekosongan itu, kita akan buatkan kolom sidebar yang baru sebagai tempat untuk menempatkan berbagai widget nantinya.
Silahkan anda copy kode untuk penambahan kolom sidebar dibawah ini :
#widget-wrapper {
width: 220px;
float: right;
padding: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Tempatkan dibawah sidebar-wrapper sehingga nanti urutannya seperti ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 940px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px; /* ubah juga nilai ini ganti dengan 470 */
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left: 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
#widget-wrapper {
width: 200px;
float: right;
padding-left: 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
Beres yang diatas, sekarang anda copy kode berikut :
<div id='widget-wrapper'>
<b:section class='sidebar' id='widget' preferred='yes'>
</b:section>
</div>
Kemudian anda simpan dibawah kode ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Jadi urutannya seperti ini :
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='widget-wrapper'>
<b:section class='sidebar' id='widget' preferred='yes'>
</b:section>
</div>
Simpan Template, sekarang coba lihat hasilnya.
**** Semoga Berhasil ****
14 komentar:
makasih sobat, aku lagi mau nambah kolom di templatku nih , untung aja mampir ke blog ini. sekali lagi thank..
makasihh :D
uhm,nice tips tq.,mampir..dumb.
Kalau ada sobat yg mau nambah lebar kolom sidebar blog,pakai panduan di atas saya jamin berhasil dan tidak error!!Thanks banget ya mas atas postingan ini.
Sama2, saya juga lg belajar, mas. Kita sama2 belajar saja untuk kemajuan bersama:)
bro kok tak cuba masih bolong disamping kiri .tambah dong trik nya biar bisa selaras dengan normal screen bukan wide screen.. biar ok... thank
thank brother dah bisa salah masukin value
http://cuaryos.blogspot.com/
bos saya utak-atik ko malah hilang kolom yang di sebelah kananya yah
Bos mo nanya backgraund blog bos ini ko bisa 2 warna, itu 1 file atau setinganya berbeda (latar HITAM dibelakang header itu gmna yah buatnya ) . . .
Terima kasih, matur nuwun, Thank you, sekelangkong, mauliate, merci.:D
tuh buat yang nanya buat latar background blog beda, udah ada postingannya..
silahkan lihat disini.. :-* :D
Kolom Blogspot Blogger
agak ribet broo .. :D
Terima kasih tipsnya kapan2 akan saya coba,karena template saya dah cukup nyaman sepertinya.hehehe.......
Sekarang template bawaan Blogger dah ada pengaturan lebar, tapi klo kita pake template orang lain, apa harus semua diganti kayak gitu Sob?
Posting Komentar
Biar tambah semangat nulis blognya,ketikkan saran dan komentar. Walaupun singkat tetapi saran dan komentar yang anda berikan sangat berarti buat blog ini.