#Portal9, Cara mengubah UKURAN blog dan rapikan postingan
Dalam hal ini mengindikasikan informasi yang disampaikan secara akurat
masukkan script iklan disini2
ukuran template Yang dirubah dari aslinya ;
Setelah bikin web biasanya Anda membuat template tapi..
terkadang ukuran tamplate tidak sesuai dengan keinginan ..
Lumrah karena gratisaan.. terkadang yang berbayarpun belum sesuai keiinginan ??
Sedikit langkah tersebut silahkan penyesuainya ;
Cari atau copy paste ;
1. Lakukan di
/* Header
----------------------------------------------- */
.idheadpic{width:100%;margin:0 auto;padding:0px 0px 0px 0px;}
#idhead {
background:#fff;filter:alpha(opacity=90);opacity:0.9;
width:990px;padding:5px 0 5px 0;
margin:0 auto;
border:0px solid $bordercolor;
}
#header-inner {
background-position: center;
margin-left: auto;
margin-right: auto;
}
#header {background:transparant;
float:left;
width: 189px;
margin-left: 10px; text-align: left;
color:#f2f2f2;
}
#header2 {float:right;
margin-right:9px;margin-top:4px;padding-bottom:4;
width:730px;text-align: right;
background:transparant; height:90px;
}
2. Jika terdapat 2 header, Lebar total bagian header ini adalah 990px, dimana terdiri dari header-left (posisinya di heder: float-left) dengan lebar 189px dan header-right dengan lebar 730px.
3. Jika di jumlahkan lebar header1 + header2 + margin + padding = lebar total header.
Kemudian cara membaca margin dan padding prinsipnya sama yaitu dari atas dan berputar searah jarum jam.
Misalkan padding: 6px 8px 6px 6px; maka yang dimaksud adalah padding-top 6px, padding-right 8px, padding-bottom 6px dan padding-left 6px. Padding adalah jarak antara teks atau image ke tepi batas elemen wrapper.
4. Sedangkan Margin biasanya jarak antara 2 wrapper misalnya antara area posting dan sidebar dipisahkan oleh margin.
/* Main containers */
#outer-wrapper {
width: 950px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 630px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 300px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
/* Post */
.post{
width: 600px;
padding: 15px;
border: 1px solid #E0E0DE;
background: #FFF;
font-family: Helvetica, sans-serif;
margin-bottom: 20px;
}
5. CSS diatas karena sudah merangkum bagian outer-wrapper, main-wrapper (posting) dan sidebar-wrapper. Pada outer-wrapper disebutkan lebarnya 950px,
sedangkan pada main-wrapper dan sidebar-wrapper lebarnya masing-masing adalah 630px dan 300px.
Kalau dijumlahkan jumlah keduanya adalah 930px. Sisa 20px dapat disimpulkan adalah margin kiri main-wrapper+margin antara main-wrapper dan sidebar-wrapper+margin kanan sidebar wrapper, sehingga jumlahnya 20px dan total menjadi 950px.
Pada susunan CSS diatas disetting auto sehingga Anda tidak mengetahui persis berapa nilai tiap margin namun yang pasti ada 3 jarak margin yang diperhitungkan.
Sambil membaca penjelasan ini lihat lagi gambar ilustrasi elemen wrapper diatas ya supaya mudah memahami
Kemudian perhatikan lagi bagian posting (post). Pada kode CSS nilai lebarnya 600px, ini sudah merupakan lebar teks atau artikel yang kita tulis.
Padding 15px berlaku untuk top, right, bottom dan left. Sehingga jumlah post width 600px + padding left 15px + padding right 15px = lebar main-wrapper 630px.
Jika di baca cermat dan sambil di praktekkan pasti Anda mendapatkan ukuran tamplet yang sesuai Anda inginkan , Tulisan diatas panduan dasarnya .
Selamat berkreasi dan berkarya.
Semoga bermamfaat
