Coba anda perhatikan gambar template ini, itu adalah template asli blogger. Hampir semua Template bawaan Blogger semuanya terdiri dari dua kolom, yaitu kolom untuk posting dan kolom sidebar untuk menempatkan Widget.
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 HTMLJangan centang
Expand Widget TemplateKemudian 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.
Bhokalor
My Picture
My Code
Contact
Chat Room
RSS Feeds
Twitter
Facebook