Tutorial: Body Melengkung

| On
2:18:00 AM

Annyeong n Selamat Hari Raya chingu!

amacam raya? best tak?  Amni besa-besa je, sbb sibuk dgn wedding pakcik Amni sekali.. hehhe

oklah, jom kita teruskan tutorial kita pada malam buta nie..
sebenarnya tuto nie d'request oleh k.Izzatie Affiqah

sebelum tu, korang tau ke apa itu "Body Melengkung" 
kalau tak tau, meh sini nak tunjuk..


*ha! yg lengkung-2 tu la..

Tutorial body melengkung ni  Amni godek code snirik tau! but, ada jgk Amni buad penambahan supaya lebih kemas...

ok, cara dye senang aja..

1. Log in > Dashboard > Design > Edit HTML

2. Tekan Ctrl + F and korang search..
/* Outer-Wrapper

3. Then, korang akan jumpa code yg macam nie..
/* Outer-Wrapper
----------------------------------------------- */
#outer-wrapper {
  width: 660px;
  margin:0 auto;
  padding:10px;
  text-align:left;
  font: $bodyfont;
  }
#main-wrapper {
  width: 410px;
  float: left;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#ffffff;

  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;
  padding: 5px;
  border:1px solid $bordercolor;
  background-color:#ffffff;

  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. Korang delete la code yg Amni tunjuk tu, and.. paste code yg baru ni..
/* Content
----------------------------------------------- */
.clear {
clear: both;
}
#content-wrapper {
-moz-border-radius-topleft: 20px;
-moz-border-radius-bottomright: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomleft: 20px;
-webkit-border-top-left-radius: 20px;
-webkit-border-top-right-radius: 20px;
-webkit-border-bottom-left-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-top-right-radius: 20px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
border: 1px solid #FAAFBA;
width: 760px;
margin: 0 auto;
padding: 0 0 15px;
text-align:$startSide;
background-color: #FFFFFF;
margin-top: 0em;
font: $bodyfont;
  -moz-border-radius: 35px;
border-radius: 35px;
Padding:25px; /* Jarak text post dengan garis pinggir */
}
#main-wrapper {
border: 0px solid #FAAFBA;
  width: 423px;
  float: left;
-moz-border-radius: 35px;border-radius: 35px;Padding:25px; /* Jarak text post dengan garis pinggir */
  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 {
border: 0px solid #FAAFBA;
font family: calibri;
  width: 233px;
  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 */
-moz-border-radius: 25px;
border-radius: 25px;
Padding:25px; /* Jarak text post dengan garis pinggir */
}

5. Korang tambah la apa yg korang nk tambah.. sbb nie code body blog Amni, so, kepad siapa yg pndai bab godek-2 code nie, buad la.. hehhe kpd yg tak pndai, x pyh la.. nnti jd apa apa, Amni tak nak tanggung! 


6. Save, Dah siap!




2 comments on "Tutorial: Body Melengkung"