Trik Cepat Menambah Tiga Kolom di Blogger

Iseng-iseng liat extremetracking ternyata ada empat orang lebih yang nyasar ke blog ini nyari cara bikin atau nambah kolom template na menjadi ( 3 ) tiga kolom. Sebab itu sekalian saja saya bikin postingan tentang bagaimana caranya menambah kolom di template new blogger.

Baiklah untuk menambah layout menjadi ( 3 ) tiga kolom, saya lebih suka mengunakan sistem persen ( % )dari pada mengunakan sistem angka. Bukan apa-apa sih, kalau mengunakan angka terkadang menjadi ribet dalam menentukan margin-nya, lagi pula ketika saya buka di Template Tab Elemen Halaman posisinya sering berantakan seperti ini.

" Perlu di Ingat kunci perubahan lebar akibat penambahan kolom terletak pada nilai Outer-wrapper nya. "

Template yang saya pake template minima .- jadi yg ingin mengikuti tutor ini mesti di istallkan dulu template minima-nya , juga biar seragam kita merubah OUTER-WRAPPER-nya menjadi 80%.

1. MENAMBAH KOLOM POSISI MAIN CONTENYA DI TENGAH.

Seperti biasa untuk mengedit layout buka tulisan atau TAB EDIT HTML.

Dan untuk kasus ini biarkan saja Expand Template Widget dalam ke adaan kosong ( tidak di tandai ).

oke sekarang cari kode ini.

 <div id='main-wrapper'>
       <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
     </div>

Setelah itu masukan di atasnya kode berikut ini.

<div id="newsidebar-wrapper">
<b:section class="sidebar" id="newsidebar" preferred="yes">
</b:section></div>

Sekarang scroll mouse ke atas ke bagian kode Css-nya. temukan kode ini.

#sidebar-wrapper {
 width: 220px;
 float: right;
 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 */
}

di bawah-nya masukan kode ini.

#newsidebar-wrapper {
 width: 220px;
 float: right;
 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 */
}

Tugas kita sekarang merubah nilai lebar, margin dan float-nya. yang pertama rubah nilai WIDTH dari OUTER-WRAPPER -nya menjadi WIDTH : 80%; ( selalu ingat di tutup dengan titik koma.)

#outer-wrapper {
 width: 80%;
 margin:0 auto;
 padding:10px;
 text-align:left;
 font: $bodyfont;
 }

Yang Kedua rubah nilai WIDTH dari MAIN-WRAPPER -nya menjadi WIDHT : 55%; dan tambahkan pula sintax Margin left nilainya sekitar 2% cukup. yaitu : Margin-left: 2%; jadi bila di bandinghkan dengan kode asli-nya kode perubahannya seperti di bawah ini.

#main-wrapper {
 width: 55%;
 margin-left:2%;
 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 */
 }

" Sekarang tinggal tersisa 45% lagi, yang dibagikan untuk kedua sidebar. terserah mau nilai sidebarnya sama atau berbeda, yang jelas mesti ada sisa buat nilai marginnya. Jadi kalau mau sidebar keduanya sama berarti nilainya sekitar 20%. dan sisanya yang 5% untuk nilai margin" lanjut Yang ketiga merubah nilai WIDHT dan menambah Margin left dari SIDEBAR-WRAPPER menjadi seperti di bawah ini.

#sidebar-wrapper {
 width: 20%;
 margin-left:2%;
 float: right;
 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 */
}

Yang ke empat NEW SIDEBAR-WRAPPER atau Sidebar Baru. Sidebar ini yang mesti dirubahnya adalah nilai WIDHT dan juga merubah nilai FLOAT nya menjadi Left. jadi WIDHT:20%; , Float:Left; Seperti di bawah ini.

#newsidebar-wrapper {
 width: 20%;
 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 */
}

Pekerjaan terakhir ialah merubah bagian HEADER-WRAPPER -nya menjadi WIDTH :100%;

#header-wrapper {
 width:100%;
 margin:0 auto 10px;
 border:1px solid $bordercolor;
 }

Dan begitu juga bagian FOOTER -nya sama WIDTH:100%.

#footer {
 width:100%;
 clear:both;
 margin:0 auto;
 padding-top:15px;
 line-height: 1.6em;
 text-transform:uppercase;
 letter-spacing:.1em;
 text-align: center;
}

Kenapa mesti 100% ( seratus persen ) ? ... ingat ! Outer-Wrapper merupakann wadah atau bungkus dari header, content ( main dan sidebar ) juga Footer -nya. ( dan mengunakan 100 % untuk kasus Template Minima )

Setelah beres semuanya, jika kita tekan PRATINJAU ngga terjadi apa-apa ? .. tenang saja jangan panik !!! itu karena memang kita belum menambah widget apapun di sidebar barunya ( kamu harus percaya )... jadi kita tekan saja tulisan SIMPAN TEMPALTE dan buka tulisan atau TAB ELEMEN HALAMAN. bravo kita sukses sekarang menambah sebuah kolom baru !!. coba tambahkan di sidebar baru sebuah WIDGET POLLING , karena kita akan melanjutkan tentang menambah kolom di new blogger ini ,yaitu bagaimana menambah kolom kalau posisi kedua sidebarnya sisi kanan atau sisi kiri ( seperti layout blog ini ).- itu juga kalau ngga malas nulisnya . Yes jadi tambahkan sekarang widget polling.. ( hanya sebagai alat untuk acuan saja ).

tunggu saja sambungannya.