Setelah berkeliling 'akhirnya saya mendapatkan trik blog menjadi 3 kolom dengan kolom posting di tengah, antara 2 sidebars. Hasilnya akan seperti blog ini.
Mari kita belajar bersama-sama
Pertama, sedikit tentang tata letak blog pada umumnya (standar), dapat dilihat sekilas, seperti yang digambarkan di bawah ini, bersama penjelasan:
Mari mulai mengedit. Silahkan Menuju Auditan 'Tata Letak' - 'Edit HTML'.
pertama harus kita lakukan adalah mendownload template yang sodara, agar Severe terjadi kesalahan Masih Bisa di kembalikan seperti semula. Cara untuk mendownload / Template backup.
Sebelum kita membuat blog kita menjadi 3 kolom, kitd harus tau berapa Dulu Lebar keseluruhan Outer-wrapper, KARENA outer-wrapper adalah tempat dimana main-wrapper (kolom Postingan) Dan sidebar berada.
Untuk mengetahui berapa Lebar outer-wrapper, Cari Kode berikut (biasanya seperti ini):
# outer-wrapper
Dibawahnya ada rinci tentang outer-wrapper itu, misalkan:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Nah, width adalah lebar keseluruhan outer-wrapper. Width outer-wrapper inilah yang akan kita jadikan dasar untuk menentukan ukuran masing 2 sidebar dan kolom postingan.
Jika terlalu kecil, silahkan ubah width nya, misalkan kita ganti dengan 900px.
Jangan lupa juga untuk menyesuaikan lebar header dan footer agar sama, ganti dengan 900px juga.
Selanjutnya, karena kita akan membuat 3 kolom - kolom posting dan 2 kolom sidebar - maka kita bagi 900px untuk 3 kolom tersebut.
Misalkan, kita coba bagi 450px untuk kolom posting, 200px untuk masing-masing 2 kolom sidebar kita. Sisanya, 50px kita sediakan untuk jarak antar kolom.
Langkah selanjutnya adalah mengganti lebar masing2 kolom.
1. Kolom Posting
Cari kode :
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
Ganti widthnya dengan 450px.
2. Kolom sidebar
Cari kode :
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
Ganti width dengan 200px
Nah, sekarang waktunya untuk menambah 1 element untuk sidebar baru kita.
Caranya, tinggal copy kode berikut, lalu paste di atas kode #main-wrapper :
#sidebar2-wrapper {
width: 200px;
float: left;
margin-right:10px;
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 */
}
Pemberian angka '2' untuk membedakan dengan sidebar yang sudah ada.
Selanjutnya, copy kode berikut :
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Kemudian paste di ATAS kode :
<div id='main-wrapper'>
Coba save, lalu pindah ke halaman 'Tata Letak' / 'Layout' - 'Element Halaman' / 'Page Element'.
Sekarang Sodara bisa lihat, sudah ada 1 element halaman baru tercipta. Coba isi element halaman baru tersebut dengan text ato logo (klik aja 'Add Gadget' / 'Tambah Gadget'), misalnya. Kemudian save, lalu preview.
Nah, bisa kita lihat hasilnya.
Sudah jadikan blog 3 kolom dengan kolom postingan berada ditengah, diantara 2 sidebar seperti blog sampah ini?
Happy Blogging!!
Mari kita belajar bersama-sama
Pertama, sedikit tentang tata letak blog pada umumnya (standar), dapat dilihat sekilas, seperti yang digambarkan di bawah ini, bersama penjelasan:
- Yang berwarna putih adalah 'Body'
- Berwarna kuning, disebut dengan 'outer-wrapper'
- Warna biru adalah 'Header'
- Warna merah adalah 'Main-wrapper', tempat postingan kita berada.
- Warna hijau adalah 'Sidebar'
- Terakhir, warna hitam adalah footer
Mari mulai mengedit. Silahkan Menuju Auditan 'Tata Letak' - 'Edit HTML'.
pertama harus kita lakukan adalah mendownload template yang sodara, agar Severe terjadi kesalahan Masih Bisa di kembalikan seperti semula. Cara untuk mendownload / Template backup.
Sebelum kita membuat blog kita menjadi 3 kolom, kitd harus tau berapa Dulu Lebar keseluruhan Outer-wrapper, KARENA outer-wrapper adalah tempat dimana main-wrapper (kolom Postingan) Dan sidebar berada.
Untuk mengetahui berapa Lebar outer-wrapper, Cari Kode berikut (biasanya seperti ini):
# outer-wrapper
Dibawahnya ada rinci tentang outer-wrapper itu, misalkan:
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
Nah, width adalah lebar keseluruhan outer-wrapper. Width outer-wrapper inilah yang akan kita jadikan dasar untuk menentukan ukuran masing 2 sidebar dan kolom postingan.
Jika terlalu kecil, silahkan ubah width nya, misalkan kita ganti dengan 900px.
Jangan lupa juga untuk menyesuaikan lebar header dan footer agar sama, ganti dengan 900px juga.
Selanjutnya, karena kita akan membuat 3 kolom - kolom posting dan 2 kolom sidebar - maka kita bagi 900px untuk 3 kolom tersebut.
Misalkan, kita coba bagi 450px untuk kolom posting, 200px untuk masing-masing 2 kolom sidebar kita. Sisanya, 50px kita sediakan untuk jarak antar kolom.
Langkah selanjutnya adalah mengganti lebar masing2 kolom.
1. Kolom Posting
Cari kode :
#main-wrapper {
width: 410px;
float: $startSide;
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 */
}
Ganti widthnya dengan 450px.
2. Kolom sidebar
Cari kode :
#sidebar-wrapper {
width: 220px;
float: $endSide;
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 */
}
Ganti width dengan 200px
Nah, sekarang waktunya untuk menambah 1 element untuk sidebar baru kita.
Caranya, tinggal copy kode berikut, lalu paste di atas kode #main-wrapper :
#sidebar2-wrapper {
width: 200px;
float: left;
margin-right:10px;
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 */
}
Pemberian angka '2' untuk membedakan dengan sidebar yang sudah ada.
Selanjutnya, copy kode berikut :
<div id='sidebar2-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section>
</div>
Kemudian paste di ATAS kode :
<div id='main-wrapper'>
Coba save, lalu pindah ke halaman 'Tata Letak' / 'Layout' - 'Element Halaman' / 'Page Element'.
Sekarang Sodara bisa lihat, sudah ada 1 element halaman baru tercipta. Coba isi element halaman baru tersebut dengan text ato logo (klik aja 'Add Gadget' / 'Tambah Gadget'), misalnya. Kemudian save, lalu preview.
Nah, bisa kita lihat hasilnya.
Sudah jadikan blog 3 kolom dengan kolom postingan berada ditengah, diantara 2 sidebar seperti blog sampah ini?
Happy Blogging!!
0 komentar:
Post a Comment