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!
Senin, 19 November 2007
Langganan:
Posting Komentar (Atom)
Trims, ana mo coba dulu n moga berhasil
BalasHapusthankns infonya, aku cb dulu yach, ntar balik lagi!
BalasHapusamazing....
BalasHapusIjin copas yak....
www.komputerdudu.blogspot.com
langsung copas aja nih...hehe
BalasHapusmeletakkan kode tersebut dimana ya?
BalasHapuswaktu mw save kok kluar Template Anda tidak dapat diparse karena tidak well-formed..giman tu gan...
BalasHapustemplate 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.
BalasHapusthanks atas infonya, salam kenal
BalasHapusTankyu yah infonya, bisa dicoba nanti nih. Sambil belajar...
BalasHapuskeren sob
BalasHapusMantab bro
BalasHapusMaaf, postingan ini dah jadul, skarang lemih mudah koq bloggernya
BalasHapus