cara buat Sidebar Di Kiri kanan Blog


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 berwarna merah 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..

0 comments: