Cara Menambahkan Sidebar Sebelah Kiri

Cara Menambahkan Sidebar Sebelah Kiri - Pada posting kali ini saya akan menceritakan langkah-langkah menambahkan sidebar kiri di template yang sedang saya gunakan ini. Sebenarnya, saya bisa saja mengunggah template baru yang sudah ada sidebar kirinya. Namun, mengganti template dengan yang baru seperti memulai pekerjaan dari awal bagi saya.

Bila mengganti template dengan yang baru berarti saya harus memasang ulang kode-kode verifikasi mesin pencari, kode verifikasi Alexa, serta kode-kode yang lainnya. Selain itu, saya juga harus mengatur kembali widget-widget yang sudah terpasang pada template sebelumnya.

Berikut ini langkah-langkah yang saya lakukan dalam menambahkan sidebar sebelah kiri pada template ini (Thesis SEO Blogger).

1. Masuk ke akun Blogger.

2. Mengeklik "Opsi lainnya" > Template.

3. Meletakkan kode berikut di dekat kelompok kode CSS untuk outer-wrapper, main-wrapper, dan sidebar-wrapper (di atas ]]></b:skin>)

#newsidebar-wrapper {
width: 160px; 
float: left;
padding:8px;
word-wrap: break-word;
overflow: hidden;
}

4. Selanjutnya menaruh kode berikut di atas kode <div id='main-wrapper'>

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

5. Mengeklik tombol "Simpan template".

Sampai di sini, sidebar kiri sudah berhasil ditambahkan. Namun, perlu dilakukan pengaturan dan penyesuaian dengan lebar main-wrapper (halaman posting) dan lebar sidebar kanan agar tampilan blog tidak terlihat berantakan.

Lebar sidebar kiri yang saya inginkan adalah sebesar 160px. Sedangkan lebar sidebar sebelah kanan yang saya mau adalah senilai 250px. Seperti diketahui sebelumnya, sidebar yang ada di sebelah kanan template ini terdiri dari: sidebar-top, sidebar-wrapper1, sidebar-wrapper2, dan sidebar-bottom.

Dalam hal ini saya hanya ingin menggunakan sidebar-top di mana sidebar ini mempunyai elemen-elemen seperti border dan warna latar belakang. Kemudian saya berkeinginan untuk menggunakan saja unsur-unsur yang terdapat di sidebar kanan untuk diterapkan pada sidebar sebelah kiri sehingga kode CSS sidebar kiri menjadi seperti di bawah ini.

#newsidebar-wrapper {
border-left: 1px  dotted #dddddd;

border-bottom: 1px  dotted #dddddd;
border-top: 1px  dotted #dddddd;
border-right: 1px  dotted #dddddd;
background:#F5F5F5;
width: 160px;
float: left;
padding:8px;
word-wrap: break-word;
overflow: hidden;
}

Sekarang saya akan menghitung total lebar piksel wrapper yang diperlukan untuk membentuk sidebar kiri dan sidebar kanan. Untuk lebih jelasnya bisa dilihat pada tabel di bawah ini.

	Sidebar Kiri	Sidebar Kanan
width	160px	250px
border-left	1px	1px
border-right	1px	1px
padding-left	8px	8px
padding-right	8px	8px
Jumlah	178px	268px
Total Lebar Wrapper Sidebar Kiri & Kanan	446px

Saat ini saya sudah mengetahui berapa piksel wrapper yang dibutuhkan untuk sidebar kiri dan sidebar kanan yaitu sebesar 446 piksel. Lebar Outer-wrapper untuk template ini adalah sebesar 900 piksel. Dengan demikian lebar wrapper halaman posting akan mendapat kuota sebesar 900 - 446 = 454 piksel.

Nah, agar halaman posting tidak berhimpitan dengan sisi kanan sidebar kiri dan sisi kiri sidebar kanan, maka saya menambahkan margin kiri sebesar 10px dan margin kanan sebesar 10px pada main-wrapper. Jadi, width halaman posting akan menjadi 454px - 20px = 434 px. Dua puluh piksel adalah nilai dari jumlah kedua margin.

Setelah diadakan penyesuaian, maka CSS untuk main-wrapper adalah menjadi seperti di bawah ini.

#main-wrapper {
float:left;
margin-right:10px;
margin-left:10px;
overflow:hidden;
width:434px;
word-wrap:break-word;
}

Selain itu, saya juga harus mengganti lebar kolom komentar dan kotak komentar menjadi sebesar 434 piksel untuk menyesuaikan dengan lebar halaman posting agar tampak serasi. Kedua unsur tersebut ditunjukkan pada kode seperti yang tampak di bawah ini.

#comments-block{border:0px dotted #ccc;width:434px;margin:1.3em 0 1.5em;line-height:1.6em}

<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='434'/>

Menambah sidebar kiri