HomeCara Membuat Blog Tiga Kolom
Sunday, September 8, 2013
0
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
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;
}
#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.
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 Unknown
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.Ditulis oleh Unknown
Rating Blog 5 dari 5
Categories:
Tips dan trik
0 comments:
Post a Comment