Mengubah Template Dots Dark Hitam Menjadi Tiga Kolom

Untuk mengubah template dots dark berwarna hitam, tentunya berbeda dengan mengubah template dots yang berwarna putih. Jika kita ingin mengubah template ini menjadi tiga kolom, maka ikutilah trick berikut ini.

Pertama carilah code yang berwarna hitam berikut ini:

#outer-wrapper {
background:url("http://www.blogblog.com/donts_dark/bg_3dots.gif") no-repeat 250px 50px;
width:700px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:450px;
float:right;
padding:100px 0 20px;
font-size:85%;
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 */
}

#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}

Selanjutnya, ganti code yang berwarna hitam di atas atau ganti code di atas menjadi seperti berikut ini:

#outer-wrapper {
background:url("http://www.blogblog.com/donts_dark/bg_3dots.gif") no-repeat 275px 50px;
width:950px;
margin:0 auto;
text-align:left;
font:$bodyfont;
}

#header-wrapper {
display: none;
}

#main-wrapper {
width:400px;
float:left;
padding:100px 0 20px;
font-size:85%;
margin-left:50px;
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 */
}

#main {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") -100px -100px;
padding:20px 10px 15px;
}

#newsidebar-wrapper {
width:200px;
float:right;
font-size:85%;
padding-bottom:20px;
margin-right:25px;
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 {
background:url("http://www.blogblog.com/dots_dark/bg_minidots2.gif") 150px -50px;
padding:40px 10px 15px;
width:200px;
width/* */:/**/180px;
width: /**/180px;
}

Berikutnya ubahlah beberapa code lagi. Code di bawah ini bisa kita gunakan di template dots biasa (yang berwarna putih), maupun dots dark (yang berwarna hitam).

Cari code berikut ini:

/* Page structure tweaks for layout editor wireframe */
body#layout #sidebar, body#layout #main,
body#layout #main-wrapper,
body#layout #outer-wrapper,
body#layout #sidebar-wrapper {
padding: 0;
}

body#layout #sidebar, body#layout #sidebar-wrapper {
}

Jika sudah, ubahlah menjadi seperti berikut:

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

body#layout #main-wrapper,
body#layout #main {
width: 400px;
padding: 0px;
margin: 0px;
}

body#layout #sidebar-wrapper,
body#layout #newsidebar-wrapper,
body#layout #sidebar,
body#layout #newsidebar {
width: 150px
padding: 0px;
}

Selanjutnya, tambahkan code berikut di atas tag <div id='main-wrapper'>. Tambahkan code di bawah ini:

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

Sekarang sudah selesai, jangan lupa untuk menyimpan template dengan meng-click Save Template. Dan hasilnya ? Hebat...

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