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.
 |
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/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/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/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/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/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/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/AVvXsEhU137UKXhqpZ7Np_msdka6Z7HNCPeX97LaebcF5JPHsP4HbHftMGEqsBWJbsrZ-GpyAOgOHCXFB0DSL1lOSSnlcJ9umh8pz8s9iDB5J8LBiXnH-3WaukIIk9-9M1kmQ5Q0eS5ajbmECBg6/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.