Contoh cara buat sidebar di kiri kanan seperti yang telah saya buat pada blog ini..
dapat cara dari beberapa blog dan web HTML code (tapi bukan tiru bulat-bulat ar)..berapa kali cuba buat dengan keringat peluh jantan akhirnya berjaya juga biarpun nda berapa sempurna..huhuhu..pis umi..
1.Login ke Blog
2.Edit HTML
3.Cari kod seperti di bawah
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $endSide;
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: left;
padding-right :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 */
}
4.Copy kod di bawah ini
#sidebarnew-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
/* Headings
----------------------------------------------- */
5.Kemudian cari kod seperti dibawah ini
<div id='main-wrapper'>
Letakan kod berwarnamerah merah jambu kah ini (buta warna bah)diatasnya lihat kod dibawah ini
<div id='sidebarnew-wrapper'>
<b:section class='sidebar' id='sidebarnew' preferred='yes'/>
</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:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
</b:section>
</div>
..wasallamu..siap..
dapat cara dari beberapa blog dan web HTML code (tapi bukan tiru bulat-bulat ar)..berapa kali cuba buat dengan keringat peluh jantan akhirnya berjaya juga biarpun nda berapa sempurna..huhuhu..pis umi..
1.Login ke Blog
2.Edit HTML
3.Cari kod seperti di bawah
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
width: 840px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}
#main-wrapper {
width: 410px;
float: $endSide;
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: left;
padding-right :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 */
}
4.Copy kod di bawah ini
#sidebarnew-wrapper {
width: 180px;
float: right;
padding-left:10px;
word-wrap: break-word;
overflow: hidden;
}
/* Headings
----------------------------------------------- */
5.Kemudian cari kod seperti dibawah ini
<div id='main-wrapper'>
Letakan kod berwarna
<div id='sidebarnew-wrapper'>
<b:section class='sidebar' id='sidebarnew' preferred='yes'/>
</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:widget id='Feed1' locked='false' title='Recent Post' type='Feed'/>
</b:section>
</div>
..wasallamu..siap..
0 comments:
Post a Comment