Cara Menambah Kolom Antara Post dan Sidebar

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

Posted by mukhammad nur Kamis, 05 April 2012 0 komentar
Cara Menambah Kolom Antara Post dan Sidebar. Biar tidak berkepanjangan kita langsung saja pada pokok pembahasan. untuk membuat satu kolom antara kolom post dan sidebar. yang pertama perlu anda perhatikan adalah ukuran lebar dari outer-wraper blog yang anda miliki. misalnya anda memiliki lebar auter-wraper 660px. nah untuk menambah kolom baru anda harus menambah lebar blog anda.

Untuk menambah kolom baru yang perlu anda perhatikan adalah kode-kode pada outer-wrapper berikut:
#outer-wrapper {
width: 680px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
word-wrap: break-word;
overflow: hidden;
}
Nah untuk menambah kolom baru secara logika tentunya lebar dari Outer-wraper akan mengalami perubahan. pertama sekali yang harus di perhitungkan adalah, berapa lebar kolom yang ingin kita tambahkan. misalnya nilai dari kolom baru 230px; berarti jumlah keseluruhan lebar outer wrapper menjadi kira-kira 420px + 230px + 230px + 20 px = 880 pixel kemudian bisa kita tambahkan lagi 10 px untuk sela oute wraper sehingga lebar keseluruhan 890 pixel. jadi kode untuk penambahan kolom baru dari nilai di atas adalah:
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Nah setelah di tambah kan maka keseluruhan kodenya akan menjadi seperti ini:
#outer-wrapper {
width: 890px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 230px;
float: right;
padding-left:10px; /* yang ini adalah tambahan untuk jarak sela */
word-wrap: break-word;
overflow: hidden;
}
#kolombaru-wrapper {
width: 230px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
Kode di atas merupakan langkah pertama yang harus kita tambahkan. berikut nya adalah menambah kode id untuk kolombaru tersebut. untuk kode id sidebar sebelum penambahan kolombaru adalah sebagai berikut:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
karna kita sudah menambah elemen baru pada sidebar, maka kita juga harus menambahkan id untuk elemen baru tersebut. id elemen baru tersebut adalah sebagai berikut
<div id='kolombaru-wrapper'>
<b:section class='sidebar' id='kolombaru' preferred='yes'>
</b:section>
</div>
Nah setelah menambahkan id kolom baru tersebut dengan id sidebar blog yang sebelumnya. sehingga menjadi seperti ini:
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
</div>
<div id='kolombaru-wrapper'>
<b:section class='sidebar' id='kolombaru' preferred='yes'>
</b:section>
</div>
Selesai... simpan dan sekarang silahkan di cek pada tata letak blog anda. di sana akan terlihat kolom yang baru yang kita tambah kan tadi. untuk nilai header dan footer sebaiknya anda tambahkan menjadi 890 px. sehingga menjadi sama dengan nilai outer wraper. biar kelihatan lebih klop. Selamat mencoba.....

Cara Menambah Kolom Antara Post dan Sidebar
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Menambah Kolom Antara Post dan Sidebar
Ditulis oleh mukhammad nur
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://cintafido.blogspot.com/2012/04/cara-menambah-kolom-antara-post-dan.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Online Skill - Cinta fido Fido | Kopi kanan Akherat | Kisah Nabi Muhammad | Sahabat | Belajar Blogger | Template | HTML | Tutorial | Komputer.

investasi semoga anda senang

kurs mata uang BCA-2


Selamat datang di blog cinta fido, semoga anda diberi keSehatan oleh alloh SWT

Islam itu Cinta Damai Agama Islam Cinta Damai
jihad Damai adalah amal kebaikan yang Allah perintahkan dan menjadi sebab kokoh dan kemuliaan umat islam