Catatan:Tinjau dulu hasil tamplate anda sebelum di seve.
Cari kode CSS #Outer-Wrapper.
Lalu COPY kode di bawah ini dan taruh tepat di bawah kode CSS #Outer-wrapper.
#newsidebar-wrapper {
width: 200px;
float: left;
padding-right:10px;
word-wrap: break-word;
overflow: hidden;
}
/* 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 class='sidebar' id='newsidebar' preferred='yes'/>
</div>
Keseluruhan kodenya jadi seperti ini :
<div id='newsidebar-wrapper'>
<b:section class='sidebar' id='newsidebar' preferred='yes'/'>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Post' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='About Me' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Blog Archives' type='BlogArchive'/>
</b:section>
</div>
Langkah terakhir Save Template.Dan lihat hasilnya sesuaikan semua ukuran sidebar lef,main-wrapper,right-sidebar pada tample anda.
Ditulis Oleh : Anonymous
Artikel Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot ini ditulis oleh Anonymous pada hari . Terimakasih atas kunjungan Anda pada blog ini. Kritik dan saran tentang Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot dapat Anda sampaikan melalui kotak komentar dibawah ini.
Anda sedang membaca artikel tentang Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot dan anda bisa menemukan artikel Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot ini dengan url http://tutorial-onlineku.blogspot.com/2012/08/cara-membuat-sidebar-kiri-left.html. Anda boleh menyebarluaskan atau mengcopy artikel Cara Membuat Sidebar Kiri (left-sidebar)Pada Blogspot ini jika memang bermanfaat bagi anda atau teman-teman anda,namun jangan lupa untuk mencantumkan link sumbernya.Tutorial Onlineku | Tutorial Blogspot | Tutorial Blogger | Tutorial Bagi Fomula
Share :
0 Comments
