WAONE DARK S3V3N

23 Agustus 2009

Melebarkan kolom

Kali ini akan saya coba bagaimana cara melebarkan kolom. Untuk melebarkan kolom kita hanya perlu mengerti sedikit bahasa html. Yang pertama kita akan masuk ke pengaturan template terutama pada edit html.


Lalu cari kode-kode di bawah ini (contoh di bawah ini memakai template 3 kolom isnaini yg coba 780 tapi sepertinya udah di edit oleh papa ipam):

#toplinkads{
background-color: #FFFFFF;
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: #CCCCCC;
}
#blogtitle h1{
color: #000000;
font-size: 18px;
text-align: center;
font: normal bold 200% 'Trebuchet MS', Arial, Sans-serif;;
margin-top: 2px;
margin-bottom: 2px;
}
#blogtitle h1 a{
color: #ff6600;
}
#blogtitle{
padding: 0px;
width: 320px;
margin: 0px;
}
.description {
text-align: center;
font-size: 12px;
font-weight: bold;
}
.narrowcolumn {
float: left;
width: 440px;
overflow: hidden;
padding: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 10px;
}
#sidebar{
width: 320px;
float: right;
position: static;
top: 0px;
color: #666666;
background-color: #ffffff;
border: 1px solid #7f7f7f;
padding-top: 0px;
padding-right: 4px;
padding-bottom: 0px;
padding-left: 4px;
margin-top: 10px;
margin-right: 10px;
margin-bottom: 10px;
margin-left: 0px;
}
#sidebar a {
color: #063E3F;
}
#sidebar .widget {
margin-bottom: 1em;

}

#sidebar .widget-content {
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
}
#sidebar h2{
font-size: 12px;
font-weight: bold;
color: #000000;
font: normal bold 116% Trebuchet, Trebuchet MS, Arial, sans-serif;
background-color: #ffffff;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 4px 5px;
}
#leftsidebar h2 {
background-color: #ffffff;
margin-top: 5px;
margin-right: 0px;
margin-bottom: 5px;
margin-left: 0px;
padding: 4px 5px;
}

#leftsidebar
{
width: 163px;
float: left;
padding-top: 0;
padding-right: 1px;
padding-bottom: 0;
padding-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 1px;

}
#rightsidebar
{
margin-top: 0px;
margin-left: 0px;
width: 135px;
margin-right: 4px;
margin-bottom: auto;
padding: 0px;
float: right;
}
#kotakkanan{
float: left;
width: 300px;
list-style-image: none;
list-style-type: none;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 10px;
padding-left: 0px;
margin: 0px;
}
#kotakkanan2{
float: left;
width: 300px;
list-style-image: none;
list-style-type: none;
padding-top: 5px;
padding-right: 0px;
padding-bottom: 5px;
padding-left: 0px;
margin: 0px;
}

#footer {
padding: 0px;
width: 840px;
clear: both;
height: 60px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ffffff;
color: #32527A;
}
#footer a {
color: #32527A;
}
.kosong
{
clear: both;
}

body {
font: normal normal 72% Trebuchet, Trebuchet MS, Arial, sans-serif;
text-align: center;
margin: 0px;
padding: 0px;
background-color: #CCCCCC;
color: #4c4c4c;
background: #ffffff;
}

#page {
text-align: left;
width: 840px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #ffffff;
border-right-width: 1px;
border-left-width: 1px;
border-right-style: solid;
border-left-style: solid;
border-right-color: #ffffff;
border-left-color: #ffffff;
}

#header {
height: 200px;
margin: 0px;
padding: 0px;
background-color: #ffffff;
}

kurang lebih menurutku desain dari template 3 kolom milik isnaini adalah seperti gambar di bawah ini (kalau akau tidak salah, he5)
jadi kita tinggal merubah nilai dari lebar masing-masing kolom. Misalnya sekarang akan diperlebar seperti blog punyaku (pembahasan artikel ini gak melebar ke blog orang lain kan?)

untuk narrow coloum:
pada pernyataan width: 440px; blog-ku malah tak sempitkan menjadi 370px saja

untuk blog title & Sidebar & kotak kanan & kotak kanan 2 (harus sama):
pada pernyataan width: 320px; blog-ku tak lebarkan menjadi 400px

untuk left sidebar:
pada pernyataan width: 163px; blog-ku tak lebarkan menjadi 200px

untuk right sidebar:
pada pernyataan width: 135px; blog-ku tak lebarkan menjadi 180px

untuk footer dan page:
pada pernyataan width: 840px; blog-ku malah tak sempitkan menjadi 810px saja (aslinya dari mas isnaini seingatku selebar 780px)

lha, tapi terserah anda mau diubah selebar berapa, tapi yang perlu diketahui, perhitungannya tidak pas, seperti pada template ku, meskipun footer&page selebar 810, tapi kalo narrow coloum ditambah blog title hanya 770px, juga meskipun blog title 400 px, tapi kalau left sidebar ditambah right sibar hanya 380px. Itu dikarenakan maih banyak variabel lain yg "menyusup" di antara kolom, seperti padding, margin, dan lain sebagainya. Jadi silahkan lebarkan kolom blog anda.
SUKSES SELALU!



Bookmark and Share

0 komentar:

Posting Komentar