Membuat Sidebar Tambahan

Sidebar mempunyai kegunaan yang sangat penting dalam sebuah blog, kalau sidebar blog terasa kurang untuk menyimpan informasi yang ingin disampaikan, atau tidak ingin terlalu memanjang ke bawah kalau kita hanya mempunyai satu sidebar, kita bisa menambahnya dengan sidebar yang baru.

Caranya sangat mudah, ikuti langkah-langkah berikut ini:
Langkah Pertama:

Signin ke blog anda
Klik Tata Letak
Klik edit HTML
Jangan lupa untuk membackup template terlebih dahulu,
Beri tanda centang pada kotak Expand widget Template
Cari kode HTML berikut: (untuk memudahkan pencarian tekan Ctrl+F pada keyboard komputer anda, lalu masukan salah satu phrase yang berwarna merah :#outer-wrapper { )

/* -- layout -- */
#outer-wrapper {
width: 950px;
margin: 0 auto;
text-align: $startSide;
font: $bodyfont;
background: #6f3c1b url(http://www.blogblog.com/snapshot/bg-body_$startSide.gif) $startSide top repeat-y;
}

#header-wrapper {
background: #6f3c1b url(http://www.blogblog.com/snapshot/bg-headerdiv_$startSide.gif) $startSide top repeat-y;
position: relative;
_height: 0;
}

.descriptionwrapper {
background: transparent;
width: 785px;
padding-left: 0;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 8px;
margin-top: 1px;
margin-$endSide: 0;
margin-bottom: 2px;
margin-$startSide: 0;
position: top;
bottom: 0px;
$endSide: 0px;
}

.description {
border: 0px solid 0;
background: transparent;
padding-top: 10px;
padding-$endSide: 0;
padding-bottom: 10px;
padding-$startSide: 7px;
margin-top: 4px;
margin-$endSide: 0;
margin-bottom: 0;
margin-$startSide: -6px;
color: #80FF00;

font-weight: uppercase: bold;
}

#header-inner {
background: #ffffff url(http://www.blogblog.com/snapshot/header-01_$startSide.gif) bottom $startSide no-repeat;
_height: 0;
}

#main-wrapper {
line-height: 1.4;
float: $startSide;
background: #80FF00;
padding: 10px 12px;
border-top: solid 1px #000;
width: 400px;
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 */
/* Tantek hack - http://www.tantek.com/CSS/Examples/boxmodelhack.html */
voice-family: "\"}\"";
voice-family: inherit;
width: 404px;
}
/* IE5 hack */
#main {}

#sidebar {
float:$endSide;
border-top: solid 1px #000;
padding-top: 4px;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 7px;
background: #80FF00;
width: 500px;
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 */
}

Pada kenyatannya mungkin akan berbeda dengan kode HTML blog Anda, tetapi pada prinsipnya kode-kode yang berwarna merah itu pasti ada, (sengaja saya kasih warna, supaya Anda mudah untuk mencarinya).
Lalu Copy Paste kode HTML sidebar, mulai dari #sidebar sampai dengan
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Lalu simpan dulu di Notepad,
Seperti saya meng Copy Paste kode HTML sidebar blog saya berikut :

#sidebarbaru {
float:$endSide;
border-top: solid 1px #000;
padding-top: 4px;
padding-$endSide: 0;
padding-bottom: 0;
padding-$startSide: 7px;
background: #80FF00;
width: 500px;
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 */
}



Pada contoh diatas, perhatikan kode Float:$endSide; (yang berwarna merah, pada kode HTML sidebar, itu tandanya posisi sidebar ada disebelah kanan,
Untuk sidebar baru, ganti $endSide dengan $StartSide agar posisi sidebar baru ada disebelah kiri dari sidebar lama Anda,
Lalu ganti juga kode $startSide yang ada pada kode padding-$startSide: 7px; dengan kode $endside,
Dan jangan lupa ganti kode angka dari width: 500px; dengan angka 245px, masing-masing, untuk kode sidebar lama, dan kode sidebar baru, agar nanti hasilnya sama.

Catatan: kode-kode diatas adalah kode-kode yang ada pada kode HTML blog saya, ada kemungkinan akan berbeda dengan kode-kode yang ada pada blog Anda, tetapi pada prinsipnya adalah sama, silahkan bereksperimen.

Setelah Anda selesai merubahnya, silahkan Copy Paste kode sidebar baru Anda dan simpan tepat dibawah kode:

overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}
(yang ada pada kode sidebar lama, yang paling bawah.)

Langkah Kedua:

Cari kode berikut ini:

<div id='main-wrapper'><b:section class='main' id='main' showaddelement='no'>
<b:widget id='blog1'locked='true'title='PostingBlog'type='Blog'/>
</b:section>
</div>

Apabila sudah ketemu, lalu Copy kode di bawah ini, dan simpan tepat diatasnya,

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

Silahkan Simpan template Anda, selesai!

Catatan: Jika hasilnya tidak seperti yang diharapkan, kemungkinan lebar dari main wrapper, sidebar dan sidebar baru jumlahnya tidak sama dengan lebar outer wrapper. Cobalah ubah lebar (width) dari sidebar agar hasilnya sesuai dengan keinginan Anda.

Jangan ragu untuk mencoba!!