Cara Membuat Blog Tiga Kolom

Posted by Abang Kiv Sunday, September 8, 2013 3 comments

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
Cara Membuat Blog Menjadi Tiga Kolom Sidebar




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
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Cara Membuat Blog Tiga Kolom
Ditulis oleh Abang Kiv
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://abang-kiv.blogspot.com/2013/09/cara-membuat-blog-3-kolom-cara-membuat.html. Terima kasih sudah singgah membaca artikel ini.

3 comments:

Post a Comment

Trik SEO Terbaru support Online Shop Baju Wanita - Original design by Bamz | Copyright of BERBAGI ILMU BERBAGI AMAL.