Mengubah Template Sand Dollar Menjadi Tiga Kolom

Spertinya, template yang satu ini sangat cock untuk kita yang sangat senang berburu dollar dalam program publisher. Tapi sepertinya tidak juga, karena itu hanya template saja iya kan? Tapi bagaimana jika kita ingin menjadikan template tersebut menjadi tiga kolom? Caranya mudah saja, kita hanya perlu mengikuti trik berikut yang sudah aku siapkan. Jadi, jangan tunggu lagi, langsung saja kita coba trik yang satu ini.

Jika kita menggunakan template Sand Dollar, dan kita ingin template kita menjadi tiga kolom, kita dapat mengikuti Trik Hack berikut ini.

Pertama, seperti biasa, backup dahulu template kita untuk berjaga-jaga. Lalu cari code berikut:

@media all {
div#main {
float:right;
width:66%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
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 */
}

div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 31%;
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 */
}
}

Jika sudah, ubah dan tambahkan code yang berwarna hitam menjadi seperti berikut:

@media all {
div#main {
float:left;
width:49%;
margin:0 1%;
padding:30px 0 10px 1em;
border-left:dotted 1px $bordercolor;
border-right:dotted 1px $bordercolor;
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 */
}

div#sidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: left;
width: 23%;
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 */
}

div#newsidebar {
margin:20px 0px 0px 0;
padding:0px;
text-align:left;
float: right;
width: 20%;
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 cari code berikut dan tambahkan dengan code yang berwarna hitam, jangan lupa dengan tanda komanya juga harus ditambahkan. Cari code berikut:

#sidebar h2,#newsidebar h2 {
color:$sidebarcolor;
margin:0px;
padding:0px;
font:$headerfont;
}

#sidebar .widget,#newsidebar .widget {
margin:0px 0px 33px 0px;
padding:0px 0px 0px 0px;
font-size:95%;
}

#sidebar ul,#newsidebar ul {
list-style-type:none;
padding-left: 0;
margin-top: 0;
}

#sidebar li,#newsidebar li {
margin:0px 0px 0px 0px;
padding:0px 0px 0px 0px;
list-style-type:none;
font-size:95%;
}

Selanjutnya tambahkan code CSS berikut dengan yang berwarna hitam:

#sidebar a:link,#newsidebar a:link {
color:$sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:active,#newsidebar a:active {
color:#ff0000;
text-decoration:none;
}

#sidebar a:visited,#newsidebar a:visited {
color:sidebarlinkcolor;
text-decoration:none;
}

#sidebar a:hover,#newsidebar a:hover {
color:$sidebarcolor;
text-decoration:none;
}

Lalu cari dan tambahkan juga code di bawah ini yang berwarna hitam:

body#layout #main,
body#layout #sidebar,
body#layout #newsidebar {
margin-top: 10px;
padding-top: 0;
}

Setelah itu, coba cari tag <div id='main-wrapper'> dan tambahkan code berikut di atasnya:

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

Simpan template dan nikmati hasilnya.

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