Bagaimana cara membuat atau menambahkan kolom baru di blogspot? Pada tutorial ringan ini saya akan coba sedikit memberikan konsep yang sangat sederhana bagaimana cara membuat atau menambahkan kolom baru di blogspot, baik itu membuat 2 kolom menjadi 3 kolom maupun 4 kolom atau bahkan lebih, jadi saya harapkan sobat blogger bisa berkreasi sendiri dengan panduan konsep dasar membuat kolom baru di blogspot. Saya akan berikan contoh dan ilustrasi sederhana dengan template 2 kolom, di mana sobat blogger ingin mengubah layout template 2 kolom ini menjadi 3 kolom. Seperti biasa saya menggunakan contoh dengan template minima.Konsep dasar untuk membuat kolom baru :
- Mengubah nilai ukuran width main-wrapper, sidebar-wrapper, dan outer-wrapper, biasanya header-wrapper, dan footer-wrapper mengikuti width outer-wrapper
- Membuat definisi kolom baru pada section 2 (CSS)
- Peletakan tag div baru pada section 3 (HTML) yang sudah dideklarasikan di bagian section 2 (CSS)
- Simpan dan lihat hasilnya
Saya akan memberikan penjelasan pada masing-masing poin di atas, saya harapkan sobat blogger dapat mengikuti dengan seksama, baca perlahan-lahan dan pahami setiap petunjuknya.
Mengubah template 2 kolom menjadi 3 kolom
Poin pertama dilakukan adalah mengubah nilai outer-wrapper, main-wrapper dan sidebar-wrapper, pada contoh ini saya menggunakan template minima standart dengan kode CSS defaultnya :
#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 */
}
Perhatikan nilai yang di cetak tebal yang nantinya nilai tersebut akan kita rubah. Dapat dilihat pada kode tersebut untuk ukuran outer-wrapper:660px, main-wrapper:410px, dan sidebar-wrapper:220px. Kalau sobat perhatikan jumlah width main dan sidebar adalah
630px, di mana sisa 30px adalah untuk
margin dan padding atau istilah sederhananya adalah jarak pembatas antara masing container.
Poin kedua adalah menambahkan elemen kolom baru dengan membuat nilai CSSnya, dan ubah juga nilai width outer-wrapper, main-wrapper dan sidebar-wrappernya sehingga akan seperti ini kode yang baru :
#outer-wrapper {
width: 750px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 400px;
margin-left: 20px;
float: $startSide;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper {
width: 150px;
float: $endSide; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
#sidebar-wrapper2 {
width: 150px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
}
Perhatikan juga nilai width yang di cetak tebal , yang pada umumnya
penjumlahan main-wrapper dan sidebar-wrapper tidak melebihi nilai outer-wrapper ( Width Outer > Main + Sidebar), sisa kekurangan nilai widthnya umumnya di gunakan untuk
margin dan padding agar nantinya tidak berdempetan masing-masing container. Sedangkan untuk container baru di tandai dengan warna biru.
Nilai 750px tidak harus mutlak, sobat bisa mengubah nilai tersebut dan sesuaikan dengan kebutuhan sobat dan jangan lupa juga mengubah nilai width main dan sidebarnya.NB : Biasanya saya mencopy kode #sidebar-wrapper dan mengubah id nya menjadi id baru con: #sidebar-wrapper2 kemudian mengubah nilai floatnya menjadi left
Poin yang ketiga membuat tag div sidebar baru di bagian section 3 (HTML), sebelumnya saya akan kasih lihat default kode template minima 2 kolom (no expand widget templates) :
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Kemudian kita akan memasukkan tag div sidebar baru ke dalam structur templatenya :
<div id='sidebar-wrapper2'>
<b:section class='sidebar' id='sidebar2'>
</b:section>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
Perhatikan text yang berwarna biru yang merupakan tag div sidebar barunya, sedangkan untuk yang di highlight hijau adalah nilai section class yang mempunyai arti tampillan maupun widget yang di dalam container baru tersebut mengikuti aturan class sidebar seperti nilai background, h2, text dan lain-lain yang di tandai dengan dot [.] con : .sidebar {....} jika sobat ingin memodifikasi tampilan cointainer baru silahkan buat class tersendiri con : .sidebar2 {.....} kemudian ubah section class dengan class yang sobat buat con : <b:section class='sidebar2' id='sidebar2'>, sedangkan untuk text yang di highlight merah merupakan id yang harus unik atau berbeda dengan id lainnya.
Pada poin ini sebenarnya sobat blogger bisa merubah layout template yang nantinya akan saya bahas lebih dalam lagi pada tutorial berikutnya.
Poin yang keempat adalah simpan hasil pekerjaan sobat dan lihat hasilnya jika terdapat kesalahan pada layoutnya seperti misalnya sidebar baru posisinya jatuh ke bawah, yang perlu di lakukan adalah mengatur nilai width ataupun nilai margin dan paddingnya. Gunakan prinsip trial and error! Semoga berhasil mengubah layout 2 kolom template sobat blogger menjadi 3 kolom atau lebih dengan konsep dasar di atas.
NB : Jangan lupa mengubah nilai width header dan footernya umumnya mengikuti nilai width outer
