Tidak semua template bawaan standart pada blogspot terdapat side bar
sebelah kiri,selain berfungsi untuk menambah kapasitas ruang halaman
home page pada blog juga berfungsi untuk menambah berbagai widget iklan pada halaman homepage blog kita.
Berikut CarA Membuat Sidebar Kiri Pada Blogspot.
(Jangan lupa back up template terlebih dahulu)Jika terjadi kegagalan tidak merusak template kalian.
Login di akun Blogger kalian==>dashboard==>klik
rancangan==>lalu klik edit HTML==>jangan lupa centang expand
widget..
Cari kode CSS Outer Wrapper.
Lalu COPY kode di bawah ini dan taruh tepat di bawah kode CSS #sidebar wrapper.
#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Keseluruhan kodenya jadi seperti ini :
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 420px;
float: left;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;
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 */
}
#sidebar-wrapper {
width: 200px;
float: right;
padding: 5px;
border:1px solid $bordercolor;
background-color:#c77c7c;
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 */
}
#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
Keterangan:
Outer wrappernya yg tadinya 660px diubah jadi 840px; main wrapper
tadinya 410px diubah jadi 420px; sidebar wrapper dari 220px jadi 200px.
bisa kalian sesuaikan ukuran nya sesuai template kalian.
Perhatikan juga float and padding yang warna merah,jangan kebalik right/leftnya.
Langkah berikut nya copy kode dibawah ini.
Kemudian letakan sebelum kode <div id='main-wrapper'>
<div id='newsidebar-wrapper'>
<b:section 'sidebar' id='newsidebar' preferred='yes'/>
</div>
Keseluruhan kodenya jadi seperti ini :
<div id='newsidebar-wrapper'>
<b:section 'sidebar' id='newsidebar' preferred='yes'/'>
</div>
<div id='main-wrapper'>
<b:section 'main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Post' 'Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section 'sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' 'Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' 'BlogArchive'/>
</b:section>
</div>
Langkah terakhir Save Template.