Cara Membuat Blog 3 Kolom

Cara Membuat Blog Tiga Kolom - Bagi anda yang seorang blogger, kini saya akan memberikan Tutorial mengenai bagaimana cara membuat layout menjadi 3 kolom pada blog. Anda pasti pernah melihat banyak blog yang memiliki design 3 kolom. Jika anda ingin membuat template anda seperti itu silahkan simak tutorial sederhana berikut.

Menambahkan Kolom Sidebar Ketiga pada Template Blogger

1. Pergi ke Template > Edit HTML

2. Cari :

#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 */
}

dan ganti float menjadi :

float: right;

3. Dibawah itu tambahkan :

#left-sidebar-wrap {
width: 220px;
float: left;
word-wrap: break-word;
overflow: hidden;
}

"float: left" akan membuat sidebar baru anda berada kiri. Dengan demikian anda akan memiliki sidebar di kiri template blog anda.

4. Cari dan ubah lebar dari outer-wrapper menjadi 900px atau lebih untuk menghindari tumpang tindih sidebar dengan main-wrapper.

#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
} 

 5. Cari #main-wrapper dan ganti dengan :

#main-wrapper {
width: 410px;
float: left;
margin:0 20px;
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 */
}

Berikut margin ke kiri dan ke kanan 20px ditambahkan untuk menghindari tumpang tindih sidebar dengan main wrapper. Anda dapat mengubahnya sesuai untuk mengatasi masalah tumpang tindih pada sidebar.

6. Letakkan kode berikut :

<div id='main-wrapper'>

Tepat sebelum kode ini:

<div id='left-sidebar-wrap'> 
<b:section class='sidebar' id='left-sidebar' preferred='yes'/>
</div>

7. Simpan template anda dan selamat sidebar ke-3 anda sudah terpasang

Sekarang anda harus melakukan beberapa penyesuaian sendiri. Sesuaikan lebar dengan mengubah pixel (px) dari "outer-wrapper", "main-wrapper", "sidebar-wrapper" dan "kiri-sidebar-wrap". Mengatur margin, padding dan lebar dengan cara yang sama untuk "header-wrapper" dan "footer-wrapper" untuk mencocokkan gaya.

source : http://www.simplebloggertutorials.com

Tweet