Mengubah Posisi Kolom Template

Kemarin sempat bingung juga waktu mau mengubah posisi kolom posting dan kolom sidebar dan akhirnya saya browsing dan menemukan tutorial di blog tipstrikblogging, jadi supaya tidak lupa saya menulis ulang di blog saya. Hal ini dengan mengedit di bagian CSS seperti tutorial dari blog tersebut. Contoh tampilan sidebarnya begini :

Klik untuk memperbesar

Nah ini tampilan awal di layout berada di sebelah kanan sidebarnya dan akan kita ubah menjadi sebelah kiri dengan mengedit CSS_nya sehingga tampilannya jadi seperti ini :

Klik untuk memperbesar

Cara untuk mengedit CSS-nya adalah sebagai berikut :

1. Login ke Blogspot kita

2. Klik ke pengaturan template

3. Edit HTML dan klik Expand Widget Template

4. Kita bisa cari dengan CTRL-F untuk mencari kode seperti di bawah ini

#main-wrapper {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEyGe9Ief69ywJWsSQ7wAHdNrZetL09f-GnKZnEV5pDfiJetFtawukAtNNKttBmZbhqoKdNh9h6QQlFZ-ys0-QWoLtPJU_ijjsYZOuOflfuR64lXPqLDKTmOAVPzNC54DBofU7Bxva2rp/s1600/main_shadow.gif) repeat-x scroll center top;
float:left;
overflow:hidden;
padding:18px 15px 15px 20px;
width:600px;
}
#sidebar-wrapper {
background:#F7F7F7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfmWR4pVg18KwhaQNUQimOip-SLgttxce-HjnrMx3GXenEKZhhIdgCmqjwM7mqA1Tr5nUtdeBtDmc3B5YJuC84qM9ixXizTsM74pbVjtFIllGzr3nk1Y4Wqy_bDdP9Vna-1TkT4V744be/s1600/sidebar_shadow.gif) repeat-x scroll center top;
float:right;
overflow:hidden;
padding-left:15px;
padding-right:10px;
width:275px;
padding-top:10px;
}

Lalu ubah yang warna merah dengan right dan yang warna ungu diubah menjadi right sehingga kodenya menjadi :

#main-wrapper {
background:#FFFFFF url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhmEyGe9Ief69ywJWsSQ7wAHdNrZetL09f-GnKZnEV5pDfiJetFtawukAtNNKttBmZbhqoKdNh9h6QQlFZ-ys0-QWoLtPJU_ijjsYZOuOflfuR64lXPqLDKTmOAVPzNC54DBofU7Bxva2rp/s1600/main_shadow.gif) repeat-x scroll center top;
float:right;
overflow:hidden;
padding:18px 15px 15px 20px;
width:600px;
}
#sidebar-wrapper {
background:#F7F7F7 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwfmWR4pVg18KwhaQNUQimOip-SLgttxce-HjnrMx3GXenEKZhhIdgCmqjwM7mqA1Tr5nUtdeBtDmc3B5YJuC84qM9ixXizTsM74pbVjtFIllGzr3nk1Y4Wqy_bDdP9Vna-1TkT4V744be/s1600/sidebar_shadow.gif) repeat-x scroll center top;
float:left;
overflow:hidden;
padding-left:15px;
padding-right:10px;
width:275px;
padding-top:10px;
}

5. Save template dan dapat hasilnya perubahan sidebar

Tweet

Subscribe to receive free email updates: