Cara membuat sidebar berada dikiri dan kanan postingan blog Bag.1

Pada postingan sebelumnya ane ngeshare hanya baru pernak-pernik yang sekiranya dibutuhkan sebagai pelengkap blog, dan jarang memberikan tips dan trik ke inti mendesign sebuah template, walaupun hanya beberapa. Nah untuk Postingan kali ini sekiranya dapat sedikit membantu lebih jauh cara membuat / mendesign template. dan postingan kali ini dipokuskan tentang cara  membuat sidebar berada dikiri dan kanan template blog.

Note :

• Untuk lebih memahami postingan ini, Admin sangat menganjurkan baca juga postingan tentang  Mengenal struktur dasar template blog dan Mengenal struktur dasar kode body
• Buka tiga tab sekaligus untuk dijadikan sumber referensinya 
• Ilustrasi Sidebar berada dikiri dan kanan diantara postingan, saya akan menyingkat kata-kata yang harus dipahami terlebuh dahulu

1. Postingan yang selanjutnya akan disingkat [M]
2. Sidebar yang selanjutnya akan disingkat    [S]
3. Contoh pada postingan ini adalah Sidebar, Main, Sidebar  berarti akan disingkat menjadi [S,M,S] 

• Jadi inti permasalahannya ada pada singkatan (untuk selanjutnya saya akan menggunakan kata aba-aba untuk mengganti kata singkatan)
• Untuk lebih jelasnya saya akan membahas kembali tentang permasalahan aba-aba ini pada postingan berikutnya.

Pada dasarnya (saya ambil kode simple untuk lebih mudah untuk dipahami) kode keseluruhan body yang ada pada template blog seperti dibawah ini (terkecuali template bawaan yang telah disediakan oleh blogger)

1234567891011121314151617181920<div id='content-wrapper'>

 <div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> 
</b:section> 
</div> 

</div>

<!-- end content-wrapper -->

 <div class='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section> 
</div> 

<div class='clear'> </div>

<!-- spacer for skins that want sidebar and main to be the same height-->

Coba sobat perhatikan kode yang berwarna merah diatas betul sob, kode yang berwarna merah adalah kode sidebar yang mana letak posisi sidebar tersebut berada disamping kanan main wrapper (Kontent postingan blog). dan untuk kode yang berwarna abu-abu harap di abaikan, karena kita akan sedikit lebih mempokuskan cara menambahakan sidebar kiri dan kanan diantara postingan blog

Apabila ingin menambahkan sidebar baru di sebelah kiri, maka kode sidebar yang diatas ada yang harus di tambahkan di atas kode main (posting) sehingga kodenya kira-kira akan menjadi seperti ini (lihat tembahan warna orange pada script dibawah) ;

1234567891011121314151617181920212223<div id='content-wrapper'>

<div class='sidebarL-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>

<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> 
</b:section> 
</div>

</div>
<!-- end content-wrapper -->

<div class='sidebarR-wrapper'>
<b:section class='sidebar' id='sidebar2' preferred='yes'>
</b:section> 
</div> 

<div class='clear'> </div>
<!-- spacer for skins that want sidebar and main to be the same height-->

Sekarang kita sudah tahu, bagaimana caranya membuat dan mengubah lokasi dari sidebar dengan cara yang sangat sederhana, walaupun tidak mengerti maksud dari kode-kode HTML nya.

Langkah selanjutnya adalah menuju ke bagian CSS. Kode inilah yang memonitori kode yang berada dibagian body. Coba lihat kode CSS yang ada dibawah ini, anggap lebar blog, lebar postingan blog, sidebar kanan dan sidebar kiri blog (masing-masing lebar selector template yang telah saya beri warna biru) sama dengan lebar template blog sobat.

#outer-wrapper {width: 840px;margin:0 auto;padding:10px;text-align:left;font: $bodyfont;}
#main-wrapper {width: 410px;float: left;word-wrap: break-word;overflow: hidden;}
#sidebarL-wrapper {width: 220px;float: left;padding-left:10px; word-wrap:break-word; overflow: hidden;}
#sidebarR-wrapper {width: 180px;float: right;padding-right:10px;word-wrap:break-word;overflow: hidden;}