Cara Mengatur Lebar Sidebar pada Template Thesis - Setidaknya ada 2 macam template Thesis untuk Blogspot yang saya temui. Ada template Thesis yang pada bagian sidebar-nya terdapat 2 kolom seperti pada template yang sedang saya gunakan ini. Ada pula template Thesis yang mengandung satu kolom saja di sidebar-nya.
Saya merasa sidebar tersebut terlalu lebar sehingga membuat lebar kolom halaman posting terlihat menjadi agak sempit. Sebenarnya sidebar yang cukup lebar tersebut memang didesain untuk menaruh unit iklan (adsense). Namun, saya ingin mengurangi lebar dari sidebar itu.
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/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/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/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/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/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/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}
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>
9. Kemudian gantilah kedua angka 507 tersebut menjadi 569.
10. Klik tombol "Simpan template" dan lihat hasilnya.
Sedangkan untuk mengurangi lebar sidebar pada Template Thesis SEO Blogger yang mengandung 1 kolom, caranya tidak jauh berbeda dengan cara di atas. Pada template ini, kode lebar halaman posting dan lebar kedua sidebar terdapat pada kode-kode seperti di bawah ini.
#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}
Misalnya saya juga ingin membuat lebar kedua sidebar (sidebar-top dan sidebar-wrapper) menjadi 300px maka saya tinggal mengurangi 362px dengan 62px. Dengan demikian saya juga harus menambah lebar halaman posting (main-wrapper) sebesar 62px. Hasilnya adalah 569px (507px + 62px).
Setelah itu jangan lupa untuk mengubah lebar kolom komentar dan lebar kotak komentar. Yang tadinya mempunyai lebar 507 diganti menjadi 569. Tujuannya adalah agar serasi dengan lebar halaman posting sekarang. Kode-kode untuk kedua elemen tersebut adalah seperti di bawah ini.
#comments-block{border:0px dotted #ccc;width:507px;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='507'/>
Berikut screenshot sidebar pada template Thesis 1 kolom sidebar, baik yang sebelum diganti lebarnya maupun setelah dikurangi lebarnya.
Saya merasa sidebar tersebut terlalu lebar sehingga membuat lebar kolom halaman posting terlihat menjadi agak sempit. Sebenarnya sidebar yang cukup lebar tersebut memang didesain untuk menaruh unit iklan (adsense). Namun, saya ingin mengurangi lebar dari sidebar itu.
 |
| Screenshot sidebar sebelum dikurangi lebarnya. |
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/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/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/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/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/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/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}
<iframe allowtransparency='true' class='blogger-iframe-colorize blogger-comment-from-post' frameborder='0' height='230' id='comment-editor' name='comment-editor' src='' width='507'/>
9. Kemudian gantilah kedua angka 507 tersebut menjadi 569.
10. Klik tombol "Simpan template" dan lihat hasilnya.
 |
| Screenshot sidebar yang lebarnya sudah dikurangi |
Sedangkan untuk mengurangi lebar sidebar pada Template Thesis SEO Blogger yang mengandung 1 kolom, caranya tidak jauh berbeda dengan cara di atas. Pada template ini, kode lebar halaman posting dan lebar kedua sidebar terdapat pada kode-kode seperti di bawah ini.
#main-wrapper {
float:left;
margin-right:10px;
overflow:hidden;
width:507px;
word-wrap:break-word;
}
#sidebar-top {
border-left: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
background:#F5F5F5;
width:362px;
float:right;
padding:10px;
}
#sidebar-wrapper {
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO_w2kMqBrEs4qaaQ2mKCMMZLcnvsnbtVa1a04qRQRpg_mWv88YWTFkIXuDzzUt1zTvkGmKGurN3_8KkjojUvFBeVq6IijkJnH-he70UWNpUc9e1j6YLUNA3k7WjXgopp-ZCqY7XyoJ5bX/s1600/sidebg.gif) repeat-y scroll left top;
float:right;
overflow:hidden;
padding-left:8px;
margin-right:13px;
width:362px;
word-wrap:break-word;
}
Misalnya saya juga ingin membuat lebar kedua sidebar (sidebar-top dan sidebar-wrapper) menjadi 300px maka saya tinggal mengurangi 362px dengan 62px. Dengan demikian saya juga harus menambah lebar halaman posting (main-wrapper) sebesar 62px. Hasilnya adalah 569px (507px + 62px).
Setelah itu jangan lupa untuk mengubah lebar kolom komentar dan lebar kotak komentar. Yang tadinya mempunyai lebar 507 diganti menjadi 569. Tujuannya adalah agar serasi dengan lebar halaman posting sekarang. Kode-kode untuk kedua elemen tersebut adalah seperti di bawah ini.
#comments-block{border:0px dotted #ccc;width:507px;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='507'/>
Berikut screenshot sidebar pada template Thesis 1 kolom sidebar, baik yang sebelum diganti lebarnya maupun setelah dikurangi lebarnya.
 |
| Sidebar yang belum dikurangi lebarnya. |
 |
| Sidebar yang sudah dikurangi lebarnya. |
Setelah melakukan perubahan pada lebar sidebar dan lebar halaman posting, kita perlu juga mengatur ulang banyaknya karakter atau huruf pada widget readmore otomatis agar tampilan home page menjadi lebih serasi.
