Cara Mengatur Layout Kolom di Blogspot

Cara mengatur layout kolom di blogspot

Pada pembahasan sebelumnya sudah saya jelaskan bagaimana cara membuat kolom baru di blogspot, dan pada tutorial kali ini saya akan membahas bagaimana cara mengatur layout kolom yang sudah kita buat, dan pada dasarnya ini juga berlaku buat kolom yang sudah ada baik itu template dengan layout 2 kolom ataupun sudah menjadi 3 kolom. Trik ini sebenarnya tidak rumit karena kita hanya memindahkan kode div di bagian section 3 (HTML) dan sedikit mengubah margin dan paddingnya apabila tampilan layoutnya bertabrakan dengan element lainnya dan posisi floatnya. Seperti biasa saya masih menggunakan acuan contoh layout template minima dan pada dasarnya tutorial ini bisa berlaku juga pada template yang lainnya.

Perhatikan screenshoot di bawah ini

• Posisi 2 kolom berada di sebelah kanan main post :

• Posisi main post di tengah-tengah 2 kolom :

• Posisi 2 kolom berada di sebelah kiri main post :

 

Untuk masing-masing posisi saya akan jelaskan satu persatu, dan dalam mengubah layout kolom template, sobat blogger tidak perlu mencentang expand widget.

• Pada posisi 2 kolom di sebelah kanan main post kode pada bagian section 3 (HTML) :


      <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div>

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di bawah div main-wrapper dan akan memberikan tampilan 2 kolom berada di sebelah kanan main post.

• Pada posisi main post berada di tengah-tengah 2 kolom maka kode pada section 3 (HTML):


 <div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div> 
     <div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>
   <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 
Perhatikan posisi div main-wrapper di apit oleh kode yang berwarna merah dan akan memberikan tampilan main post berada di tengah 2 kolom. 

• Pada posisi 2 kolom di sebelah kiri main post kode pada bagian section 3 (HTML) : 


<div id='newsidebar-wrapper'>
        <b:section class='sidebar' id='newsidebar' preferred='yes'>
</b:section>
      </div>
      <div id='sidebar-wrapper'>
        <b:section class='sidebar' id='sidebar' preferred='yes'>
</b:section>
      </div> 
<div id='main-wrapper'>
        <b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='false' title='Blog Posts' type='Blog'/>
</b:section>
      </div>

Perhatikan posisi kode text yang berwarna merah, di mana kode tersebut berada di atas div main-wrapper, tetapi hal ini belum cukup karena pada bagian section 2 (CSS) perlu di rubah posisi floatnya terutama yang kode sidebar-wrapper menjadi posisi float left karena defaultnya right ,baru akan memberikan tampilan 2 kolom berada di sebelah kiri main post.
Konsep dasar cara mengubah layout kolom adalah :

1. Posisi div pada bagian section 3 (HTML)
2. Posisi float, nilai margin dan padding apabila layout kolomnya bertabrakan dengan element lainnya
3. Trial and error

Semoga dengan tutorial cara mengubah layout kolom sobat blogger akan bisa berkreativitas dengan stylenya masing-masing.

Read more: http://subagya.blogspot.com/2009/01/cara-mengatur-layout-kolom-di-blogspot.html#ixzz2LcEi2sKc 
Under Creative Commons License: Attribution