Template Denim Tiga Kolom

Posted on Saturday, 23 January 2010

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..

u
ntuk 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....


No comments:

Post a Comment

Blog Ini Dofolow.
Komentar yang tidak sesuai dengan content yang di bahas, akan di hapus.

loading...

About Me

My Photo
Saya menyukai dunia blogging dan aktifitas saya adalah blogging dan mengerjakan beberapa project optimasi web dari customer saya.

Salah satu  blog saya adalah dapurblogger.
Dapurblogger adalah sebuah blog yang membahas langkah demi langkah cara membuat blog, seo strategy, dan cara menjadikan blog sebagai salah satu sumber pendapatan yang lebih dari cukup kalau untuk membeli sekarung permen :D..


© Dapurblogger. Template by Template Responsive Design Powered By Blogger