Template Denim Tiga Kolom

Memodifikasi template denim menjadi tiga kolom caranya tidak jauh berbeda dengan cara memodifikasi template minima menjadi tiga kolom..
bagi rekan-rekan koki blogger yang tertarik untuk meracik template denim menjadi tiga kolom, berikut langkah-langkahnya;
1. Nyalakan Pc atau leptop anda, pake tombol power ya jangan pakai korek api..hihihi..
2. Masuk ke Lay out atau tata letak, klik kode HTML.
3. Untuk keamanan backup dulu template yang sudah ada dengan mengcopy kemudian mempastekan pada notepad.atau kalau anda mau ya anda tulis di kertas (bad idea for your fingers :))
4. cari kode di bawah ini

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

5. lebarkan Header nya dulu dengan merubah nilai bergaris tebal diatas menjadi 950px

6. cari kode di bawah ini

#content-wrapper {
width: 760px; <----diganti nilainya menjadi 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: 240px; <----diganti nilainya menjadi 215px
float: right;
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 */
}
.........
7. kemudian tambahkan kode dibawah ini pas di titik titik diatas. Titik-titiknya di hapus ya...:)

#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 */
}

8. cari kode:
<div id='main-wrapper'>

9. Tempatkan kode di bawah ini diatas kode yang ada pada point 8

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

</b:section>
</div>

Nah sudah jadi..sekarang bisa di lihat template blog anda..

untuk template Stretch Denim Dan Stretch Denim Light, berikut cara meracik tiga kolomnya...

1.cari kode di bawah ini..

#content-wrapper {
margin: 0 2%;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 1%;
width: 64%;
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: 1%;
width: 29%;
float: right;
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 */
}

2. hapus kode di atas dan gantilah dengan kode seperti di bawah ini...

#content-wrapper {
margin: 0 2%;
padding: 0 0 15px;
text-align: left;
background-color: $mainBgColor;
border: 1px solid $borderColor;
border-top: 0;
}
#main-wrapper {
margin-left: 1%;
width: 54%;
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: 1%;
width: 21%;
float: right;
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 */
}
#newsidebar-wrapper {
margin-left: 1%;
width: 21%;
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 */
}

3. kemudian tempatkan kode dibawah ini diatas kode <div id='main-wrapper'> :

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

</b:section>
</div>

sekarang anda lihat template anda...sudah jadi atau malah amburadul...?
kalau amburadul...saya memilih kabuuur...hahahaha....