Cara Membuat Sidebar di Kanan dan Kiri Pasti Work di Blogger Tutorial 2015

Oke baiklah, Pada artikel kali ini saya akan menjelaskan kepada sobat tentang Cara Membuat Sidebar di Kanan dan Kiri Pasti Work di Blogger Tutorial 2015, Kita jalan-jalan dulu Hehehe :) Becanda,
Oke kita langsung ke TKP.

Catatan :

• 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)
<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) ; <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;}
Jangan lupa Klik atau Baca 8 gambar yang ada dibawah artikel ini,
Saya rasa cukup penjelasan tentang Cara Membuat Sidebar di Kanan dan Kiri Pasti Work di Blogger Tutorial 2015,
Semoga artikel saya kali ini bermanfaat untuk kita sesama, dan selamat mencoba.