Mengubah Template Denim Washed Menjadi Tiga Kolom

Jika ingin mengubah template Denim kita menjadi tiga kolom, setidaknya kita sekarang harus menggunakan template Denim. Bagaimana caranya? Itu sangat mudah, backup dulu template kita dan pilih template baru yang telah disediakan Blogger. Dan ingat, ini untuk template Denim dan Washed Denim

Jika Sudah, mari kita mulai merubah template denim ini. Masuk ke Layout > Edit HTML lalu cari kode berikut:

#header {
width: 760px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

Ganti kode di atas sehingga menjadi seperti berikut:

#header {
width: 950px;
margin: 0 auto;
background-color: $headerBgColor;
border: 1px solid $headerBgColor;
color: $headerTextColor;
padding: 0;
font: $headerFont;
}

Selanjutnya cari kode di bawah ini:

#content-wrapper {
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */ 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 {
margin-right: 14px;
width: 240px;
float: right;
background-color: $mainBgColor;
display: iniline; /* fix for doubling margin in IE */
word-wrap: breaking-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden /* fix for long non-text content breaking IE sidebar float */
}

Selanjutnya, ganti kode di atas sehingga menjadi seperti berikut:

#content-wrapper {
width: 950px;
margin: 0 auto;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}

#main-wrapper {
margin-left: 14px;
width: 464px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */ 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 {
margin-right: 14px;
width: 210px;
float: right;
background-color: $mainBgColor;
display: iniline; /* fix for doubling margin in IE */
word-wrap: breaking-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden /* fix for long non-text content breaking IE sidebar float */
}

#newsidebar-wrapper {
margin-left: 14px;
width: 215px;
float: left;
background-color: $mainBgColor;
display: inline; /* fix for doubling margin in IE */
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 */
}

Setelah itu, 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>

Jangan lupa untuk meyimpan template.

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