Monday, November 19, 2007

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 temukan kode-kode seperti 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!

12 comments:

  1. Trims, ana mo coba dulu n moga berhasil

    ReplyDelete
  2. thankns infonya, aku cb dulu yach, ntar balik lagi!

    ReplyDelete
  3. amazing....
    Ijin copas yak....

    www.komputerdudu.blogspot.com

    ReplyDelete
  4. meletakkan kode tersebut dimana ya?

    ReplyDelete
  5. waktu mw save kok kluar Template Anda tidak dapat diparse karena tidak well-formed..giman tu gan...

    ReplyDelete
  6. template blogger yang sekarang lebih mudah dalam melakukan penyesuaian lebar kolom. postingan tahun 2007 ini saya buat dengan menggunakan template dari mas isnaini waktu itu yang masih klasik, sedangkan saya sekarang menggunakan template baru blogger yang lebih mudah engaturannya. Jika anda baca postingan saya ini, mungkin memang harus sedikit mengerti bahasa html dasar.

    ReplyDelete
  7. Tankyu yah infonya, bisa dicoba nanti nih. Sambil belajar...

    ReplyDelete
  8. Maaf, postingan ini dah jadul, skarang lemih mudah koq bloggernya

    ReplyDelete