Cara Menambahkan Sidebar Kiri dan Kanan

Salam bloggers untuk semuanya, semoga dunia bloggers terus berkembang dan tidak akan pernah mati. Untuk kesempatan kali ini saya akan memberikan tutorial bagaimana menambahkan sidebar dan meletakkannya di kiri dan kanan.

Ikuti langkah-langkah dibawah ini:
1. Login www.blogger.com
2. Pilih dasbor
3. Pilih Tata Letak
4. Pilih Edit HTML
5. Cari kode dibawah ini Anda dapat menggunakan Ctrl+F untuk mencarinya


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}



6. Jika sudah ketemu tambahkan kode dibawah ini tepat dibawah kode diatas.


#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}


sehingga menjadi


/* Outer-Wrapper
------------------------------------------ */
#outer-wrapper {
width: 840px
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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 */
}
#sidebar-wrapper {
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan juga biar tampak ada jarak sela */
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 */
}
#sidebarbaru-wrapper {
width: 180px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}


Untuk kode yang berwarna merah merupakan kode ukuran lebar dari sidebar, Anda dapat menggantinya sesuai yang Anda inginkan tetapi ingat untuk juga memperhatikan paddingnya sehingga nanti tidak bertabrakan dengan sidebar yang lain.


7. Setelah langkah diatas sudah Anda lakukan langkah selanjutnya Anda ikuti langkah dibawah ini.


Cari kode dibawah ini:


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


yang perlu Anda cari sebenarnya bagian ini saja:


<div id="main-wrapper">


blok kode diatas terus tekan Ctrl+F


8. Setelah ketemu selanjutnya Anda tambahkan kode dibawah ini diatas kode diatas:


<div id="sidebarbaru-wrapper">
<b:section class="sidebar" id="sidebarbaru" preferred="yes">
</b:section></div>


sehingga menjadi :

<div id="sidebarbaru-wrapper">
<b:section class="sidebar" id="sidebarbaru" preferred="yes">
</b:section></div>
<div id="main-wrapper">
<b:section class="main" id="main" showaddelement="no">
<b:widget id="Blog1" locked="true" title="Posting Blog" type="Blog">
</b:widget>
</b:section></div>


Jika Anda sudah lakukan semua sekarang tinggal tekan tombol Simpan Template terus liat Elemen Halaman.