Membuat Elemen Sidebar Berada Di Kiri Dan Kanan Postingan

Masih mengenai bagaimana cara mebangun template pada blogger blog, kali ini saya akan mencoba memberitahu kepada kalian tentang bagaimana membuat elemen sidebar berada di kiri dan kanan postingan. Untuk tutorial ini saya hanya mengambil satu sampel template blogger saja yaitu template "minima". Pada awalnya bentuk dasar suatu elemen halaman pada template blog adalah seperti gambar di bawah ini.

Pada gambar di atas dapat kalian lihat bahwa elemen sidebar berada di sebelah kanan postingan (elemen posting blog). Di sini kita akan mencoba menambahkan elemen sidebar dan meletakkannya di sebelah kiri postingan sehingga akan tampak seperti gambar di bawah ini.

Pada gambar di atas tampak bahwa sekarang elemen sidebar menjadi dua yaitu berada sebelah kanan dan kiri postingan (elemen posting blog). Baiklah langsung saja saya jelaskan cara membuatnya.

login-lah pada blog dan masuklah ke bagian "Tata Letak" kemudian pilihlah "Edit HTML". Sampai di sini kalian harus mencari kode ]]></b:skin> dan letakkan kode Css di bawah ini tepat di atas kode ]]></b:skin> tersebut.

Css di bawah ini tepat di atas kode ]]> tersebut.

Kode Css

#sidebar-wrapper2 {
width: 220px;
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 */
}

.sidebar2 {
color: #ffffff;
line-height: 1.5em;
}

.sidebar2 ul {
list-style:none;
margin:0 0 0;
padding:0 0 0;
}
.sidebar2 li {
margin:0;
padding-top:0;
padding-right:0;
padding-bottom:.25em;
padding-left:15px;
text-indent:-15px;
line-height:1.5em;
}

.sidebar2 .widget {
border-bottom:1px dotted #cccccc;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Setelah kalian masukkan kode css di atas, kalian cari lagi kode <div id='main-wrapper'> dan letakkan kode sidebar di bawah ini tepat di atas kode <div id='main-wrapper'> tersebut. Oya untuk mempercepat pencarian kalian, gunakan saja Ctrl-F pada keyboard.

Kode Sidebar

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

Nah jika sudah kalian masukkan kode sidebar tersebut, simpan template dan lihatlah elemen halaman blog yang kalian miliki. Apa yang terjadi?! hehe...pastinya elemen sidebar kalian sekarang sudah menjadi 2 tetapi ini belum sempurna sobat karena kalian akan melihat tampilan elemen halaman blog yang kalian miliki seperti gambar di bawah ini.

Untuk menyempurnakannya, kalian harus menambah luas wilayah template kalian dengan cara menambah lebar (width) #outer-wrapper pada "Edit HTML". Sorry boss, saya ajak kalian bolak-balik. Pada template "Minima" lebar (width) #outer-wrapper adalah 660px. Karena ukuran sidebar2 adalah 220px, maka kalian tinggal menambahkan lebar (width) #outer-wrapper menjadi 880px (660px + 220px). Nah supaya sidebar2 tidak berdempetan dengan postingan kalian maka kalian harus memberi jarak diantara keduanya. Untuk itu kalian harus memberi margin-left:10px; pada #main-wrapper. Kalau sudah, simpan template kalian dan coba kalian lihat lagi pada "Elemen Halaman".