TUKAR KEDUDUKAN SIDEBAR DI KIRI/KANAN

Assalammualaikum && selamat malam  :)

malam nie solehah nak siapkan tutorial mcmana nak tukar kedudukan sidebar korang di kiri atau kanan.. errm.tutorial pendek kot.hihihi! nie untuk pengguna TEMPLATE DENIM SAHAJA.

LANGKAH 1

• mcm biasa,korang pegi DASHBOARD,klik DESIGN then click EDIT HTML.

LANGKAH 2

• okei,dah smpai EDIT HTML,korang CTRL+F di keyboard korang tu..cari kode nie...kat sini,ada dua kode besar yg perlu di tukar.  :) harap2 korang faham.. solehah explain satu2 okei. tapi..seblom tu,nak tunjuk korang satu diagram*cewahh!haha...

 

<---#main-wrapper                       #sidebar-wrapper----->

LANGKAH 3

  #main-wrapper {
  margin-$startSide: 14px;
  width: 680px;
  float: $startSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 {
  margin-$endSide: 14px;
  width: 290px;
  float: $endSide;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
}

*tengok 3 kode yg solehah highlight kan..kode tu yg penting untuk kita tukar dlm tutorial nie.

LANGKAH 4

• so,kita kena tukar jadik mcm nie.

  #main-wrapper {
  margin-right: 14px;
  width: 680px;
  float: right;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 {
  margin-left: 14px;
  width: 290px;
  float: left;
  background-color: $mainBgColor;
  display: inline;       /* fix for doubling margin in IE */
  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 */
 }

*skarng,solehah dh tukar sidebar kt sblah left && main wrapper sblah right.hihi..paham kn?

LANGKAH 5

• naa..kn dah siap..korang just tukar left right je..tapi make sure preview dulu tau..jangan trus save. :)

#sekian sahaja untuk mlm nie,eh..kenapa tutorial kali nie mcm step by step mcm dalam buku lab pulak.!hahaha..nanti dah cuti next week.solehah update tutorial lagii banyak.. selasa & khamis depan solehah ada paper final exam lagi..wish me luck okei!  :)