Mengubah Template Minima Menjadi Tiga Kolom

Template Minima merupakan salah satu template yang banyak digunakan oleh teman-teman Blogger. Mengapa? Sesuai dengan namanya, karena template ini sangat minimalis, tidak hanya itu, template Minima merupakan template yang bebas diganti dengan mudah karena "postur" template-nya yang baik. Yang semula berpostur imageless bisa diberi tampilan gaya yang lebih dengan menambah background pada header-nya.

Tapi bagaimana untuk melakukannya agar menjadi tiga kolom? Seperti biasa, masuk ke Layout > Edit HTML dan jangan lupa untuk memberi cek pada Expand Widget Template. Lalu cari dan tambahkan tambahkan 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 */
}

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

Lalu ubah atau tambahkan kode berikut hingga menjadi seperti berikut:

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

#main-wrapper {
width: 400px;
margin-left: 25px;
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: 150px;
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 */
}

Selanjutnya temukan lalu edit koni ini sehingga menjadi seperti berikut ini:

/** Page structure tweaks for layout editor wireframe */
body#layout #outer-wrapper,
body#layout #header-wrapper,
body#layout #footer {
width: 750px;
padding: 0px;
}

body#layout #main-wrapper {
width: 400px;
margin-left: 20px;
}
body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper {
width: 150px;
}

Jika sudah, selanjutnya tambahkan kode berikut di atas kode <div id='main-wrapper'>

<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'>
<b:widget id='NewProfile' locked='false' title='About Me' type='Profile'/>
</div>

Sudah selesai, mudah kan?

Ternyata Halaman Yang Ini Bagus Juga Untuk Di Cetak: Cetak Halaman Ini

Masukkan Email Kalian Untuk Mendapatkan Artikel-Artikel Seperti Di Atas:

Delivered by FeedBurner