Posted by: EKO HARDIANSYAH
Mengurangi lebar sidebar harus dibarengi dengan menambahkan lebar halaman posting. Yang mana nilai pengurangan lebar sidebar sama dengan nilai untuk menambahkan lebar halaman posting. Misalnya, saya mengurangi lebar sidebar sebesar 60px, maka saya juga harus menambahkan lebar halaman posting sebesar 60px.
Berikut ini langkah-langkah yang saya lakukan untuk mengubah nilai lebar halaman posting dan lebar sidebar pada template yang sedang saya pakai ini.
1. Masuk ke akun Blogger.
2. Klik "Opsi lainnya" kemudian klik "Template".
3. Klik tombol "Cadangkan / Pulihkan" lalu klik tombol "Unduh template lengkap" untuk membuat salinan template.
4. Lalu klik tombol "Edit HTML" dan klik tombol "Lanjutkan".
5. Beri tanda centang pada "Expand Template Widget".
6. Kemudian saya mencari kode-kode seperti di bawah ini untuk menemukan lebar halaman posting dan lebar sidebar. Dari kode-kode di bawah ini kalau lebar halaman posting sebesar 507px, lebar sidebar atas dan sidebar bawah sebesar 362px, lebar sidebar-wrapper1 sebesar 160px, dan lebar sidebar-wrapper2 sebesar 182px.
#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px dotted #dddddd;
border-bottom: 1px dotted #dddddd;
border-top: 1px dotted #dddddd;
border-right: 1px dotted #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:8px;
}
#sidebar-wrapper1 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW657sZqxzmHZ7vb0yQ82hGJNHYtnC16VHd0JlVKV80mvExkPAHuHruxH4JzBRxCTlgFiuOADzKUc82CHNy4VZxtaxwgtNDzm3RlYWHcHLtGvPlAtrif_C3YS7usTo116YjqFLQEqiwPZb/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:15px;
margin:18px 0px 5px 0px;
width:160px;
word-wrap:break-word;
}
#sidebar-wrapper2 {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW657sZqxzmHZ7vb0yQ82hGJNHYtnC16VHd0JlVKV80mvExkPAHuHruxH4JzBRxCTlgFiuOADzKUc82CHNy4VZxtaxwgtNDzm3RlYWHcHLtGvPlAtrif_C3YS7usTo116YjqFLQEqiwPZb/s1600/sidebg.gif) repeat-y scroll left top;
float:left;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:182px;
word-wrap:break-word;
}
#sidebar-bottom {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiW657sZqxzmHZ7vb0yQ82hGJNHYtnC16VHd0JlVKV80mvExkPAHuHruxH4JzBRxCTlgFiuOADzKUc82CHNy4VZxtaxwgtNDzm3RlYWHcHLtGvPlAtrif_C3YS7usTo116YjqFLQEqiwPZb/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin:0px 10px 10px 0px;
width:362px;
word-wrap:break-word;
}
7. Di sini saya akan membuat lebar sidebar atas dan sidebar bawah menjadi 300px. Dengan demikian saya harus mengurangi lebar kedua sidebar tersebut sebesar 62px karena 362px dikurang 300px sama dengan 62px. Setelah mengurangi lebar sidebar sebesar 62px, berarti saya juga harus menambah lebar halaman posting sebesar 62px juga. Dengan demikian lebar halaman posting menjadi 569px (507px + 62px).
Sekarang saya harus menyesuaikan lebar untuk sidebar-wrapper1 dan side-wrapper2. Seperti diketahui, saya telah mengurangi lebar sidebar-top dan sidebar-bottom masing-masing sebesar 62px, untuk itu saya harus mengurangi juga lebar kedua sidebar-wrapper tersebut sebesar 62px. Agar lebih mudahnya saya bagi 2 saja angka 62px ini sehingga lebar (width) sidebar-wrapper1 yang 160px itu saya kurangi 31px. Dengan demikian lebarnya menjadi 129px. Begitu pula lebar side-wrapper2 saya kurangi 31px sehingga menjadi 151px (182px - 31px).
8. Karena lebar kolom komentar dan lebar kotak komentar sama dengan lebar halaman posting (sebelum diubah) yakni sebesar 507px, maka ada baiknya kita menambahkan pula lebar kedua elemen tersebut agar tampak serasi yaitu menjadi 569px (sama dengan lebar halaman posting setelah diubah).
Untuk mencari kedua lebar elemen tersebut, carilah kode-kode seperti di bawah ini.
#comments-block{border:0px dotted #ccc;width:507px;margin:1.3em 0 1.5em;line-height:1.6em}