tidak usah pusing-pusing untuk mancari template baru untuk blog sobat, karena kali ini tips yang akan saya posting adalah bagaimana caranya menambah kolom sidebar pada blog sobat.
langsung saja ya,,
1. sobat masuk ke rancangan + edit HTML
2. cari script seperti di bawah ini :
/* Outer-Wrapper3. cari kode #outer-wrapper{
------------------------------------------ */
#outer-wrapper {
width: 660px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: left;
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: 220px;
float: right;
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 */
}
kemudian ganti kode yang berwarna merah hingga menjadi seperti ini :
#outer-wrapper {4. cari kode #sidebar-wrapper{
width: 960px;
margin:0 auto;
padding:10px;
text-align:left;
font: $bodyfont;
}
tambahkan kode yang berwarna merah hingga menjadi seperti ini :
#sidebar-wrapper {5. tambahkan kode dibawah ini tepat di bawah #sidebar-wrapper{
width: 220px;
float: right;
padding-left:10px;
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 */
}
sehingga kodenya menjadi seperti ini :
#sidebar-wrapper {6. cari kode seperti ini :
width: 220px;
float: right;
padding-left:10px; /* yg ini tambahan biar tampak ada jarak sela */
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 */
}
#sidebarnew-wrapper {
width: 300px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
<div id='sidebar-wrapper'>7. tambahkan kode berwarna merah ini tepat di bawah langkah no.6
<b:section class='sidebar' id='sidebar' preferred='yes'>
<b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/>
<b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/>
</b:section>
</div>
<div id='sidebarbaru-wrapper'>sehingga kodenya menjadi seperti ini :
<b:section class='sidebar' id='sidebarbaru' preferred='yes'/>
</div>
Sekarang sobat misa melihat hasilnya pada elemen laman,, sidebar sobat sudah bertambah satu, untuk menambah sidebar baru lagi caranya sama seperti diatas, yang perlu diperhatikan adalah pada code berwarna merah di bawah ini sama :
<div id='sidebar-wrapper'><b:section class='sidebar' id='sidebar' preferred='yes'><b:widget id='Profile1' locked='false' title='Mengenai Saya' type='Profile'/><b:widget id='BlogArchive1' locked='false' title='Arsip Blog' type='BlogArchive'/></b:section></div>
<div id='sidebarbaru-wrapper'><b:section class='sidebar' id='sidebarnew' preferred='yes'/></div>
#sidebarnew-wrapper {
width: 300px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
<div id='sidebarbaru-wrapper'><b:section class='sidebar' id='sidebarnew' preferred='yes'/></div>
0 comments:
Post a Comment