Rabu, 13 Juli 2011
Menambah Sidebar Sebelah Kiri
Pada artikel yang lalu telah berhasil menambah sidebar di sebelah kanan kalau mau melihat silakan, agar lebih mudah memahami tutorial ini. Sedebar sebelah kiri dapat digunakan untuk menempatkan widget sesuka anda seperti label atau widget lainnya.
Cara Menambah Sidebar di Sebelah Kiri
Membuat sidebar sebelah kiri ini lebih tepatnya menambah elemen kiri, cara sangat mudah.Masuk Dasbor Blogger
1. Pergilah ke dasbor blogger2. Klik Rancangan, terus klik Edit HTML
3. Backup lah dulu template anda
Kode CSS
4. Cari kode CSS seperti ini.#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 220px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
5. Hapus dan ganti dengan kode ini
#outer-wrapper {
width: 910px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $startSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebar-wrapper {
width: 200px;
float: $endSide;
word-wrap: break-word;
overflow: hidden;
}
#sidebarkiri-wrapper {
width:260px;
float:left;
word-wrap:break-word;
overflow:hidden;
}
Halaman Body
6. Cari kode seperti ini<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>
7. Tambahkan kode ini diaatasnya
<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
</b:section>
</div>
</div>
Menjadi seperti ini
<div id='sidebarkiri-wrapper'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
<b:section class='sidebar' id='sidebarkiri' preferred='yes'>
</b:section>
</div>
</div>
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>
<div id='sidebar-wrapper'>
<b:section class='sidebar' id='sidebar' preferred='yes'/>
</div>8. Save
9. Selesai
0 comments:
Post a Comment