Membuat Sidebar Blog Menjadi 2 Kolom

Membuat Sidebar Blog Menjadi 2 Kolom

Membaca artikel2 blog para master blogger emang bikin semangat buat nambah postingan terus dan tambah ilmu dalam mengutak-atik blog. Para master2pun jg sebelumnya sama seperti kita yang pemula, awalnya mereka juga belajar dari bawah sambil jalan ... tau2 ilmu udah menumpuk. Nah tulisan ini juga udah banyak ditulis oleh para master blogger, aku cuma mereview aja sekalian nambah koleksi postingan, Biar lengkap brur ... aku akan menulis bagaimana cara membuat sidebar blog terbagi menjadai 2 kolom.

Caranya adalah :
1. Login ke Blogger
2. Masuk ke TATA LETAK --> EDIT HTML
3. Backup template dulu untuk cadangan.
4. Copy paste kode CSS dibawah ini diatas kode ]]></b:skin>.

#seby-antoe-Sidebar {
float: right;
word-wrap: break-word;
overflow: hidden;
}

#sidebar {
width: 300px;/* SESUAIKAN */
float: left;
overflow: hidden;
margin:0px 0px 10px 0px;
}

#sidebar h2 {
color: #FFFFFF;
background: #000000;
font-family: Arial;
font-size:16px;
display:block;
text-align: center;
padding:5px 0px 5px0px;
margin:0 0 5px 0;
border: 1px solid #cccccc;
}

#sidebarL{
width:140 px;/* SESUAIKAN */
float:left;
background:#FFFFFF;
margin-bottom: 4px;
padding: 10px 0px 10px 0px;
border: 1px solid #cccccc;
}

#sidebarR{
width:130 px;/* SESUAIKAN */
float:right;
background:#FFFFFF;
margin-bottom: 4px;
padding: 10px 0px 10px 0px;
border: 1px solid #cccccc;
}

#sidebarL .widget-content {margin:0px 5px;5px 5px;}
#sidebarR .widget-content {margin:0px 5px;5px 5px;}

5. Cari kode ini : <div id='sidebar-wrapper'> dan Copy paste kode dibawah ini dan letakkan diatas <div id='sidebar-wrapper'>.

<div id='seby-antoe-Sidebar'>
<div id='sidebar'>

<b:section class='sidebar' id='sidebarL' preferred='yes'>
</b:section>

<b:section class='sidebar' id='sidebarR' preferred='yes'>
</b:section>

</div>
</div> <!-- end seby-antoe-Sidebar -->

6. Klik Pratinjau untuk melihat perubahanya, tentu saja dengan menyesuaikan ukuranya terlebih dahulu ( Keterangan yang saya kasih warna merah yaitu width, background, margin, padding ).
7. Jika sudah sesuai harapan Klik Simpan Template.

Jika sobat ingin 2 kolom sidebar yang anda buat berada di bawah sidebar utama, simpan kode di atas sesudah kode di bawah ini :

<div id='sidebar-wrapper'>
.............
.............
.............
</b:section>
</div><div style='clear:both;'/>

Selamat mencoba ...