Gambarajah basic layout blogspot

Untuk module ke 8, sy akan berkongsi cara untuk menambahkan kolum atau sidebar pada template. Gambarajah diatas adalah untuk memberikan kefahaman kepada anda apa yang sy akan jelaskan nt.


1 Pergi ke Dashboard > Design > Edit HTML.
2. Back up template. Dashboard > Design > Edit HTML > Download Full Template.
3. Cari coding dibawah dan copy. Coding tersebut merupakan coding asal template anda.

#sidebar-wrapper {
width: 220px;
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 */
}

4 Pastekan coding asal yang anda copy td dibawah coding asal. Tukarkan sidebar-wrapper kepada sidebar1-wrapper untuk css kedua yang dipastekn td. Contoh seperti dibawah.

#sidebar-wrapper {
  width: 220px;
  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 */
}

/* additional sidebar start */
#sidebar1-wrapper {
  width: 220px;
background: salmon;
  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 */
}/* additional sidebar end */ 

5 Tukarkan kelebaran outer-wrapper,header dan footer.

#outer-wrapper {
width: 660px; <------ tukarkan ikut jumlah lebar template
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

#header-wrapper {
width:660px; <------ tukarkan ikut jumlah lebar template
margin:0 auto 10px;
border:1px solid $bordercolor;
}

#footer {
  width:660px;  <------tukarkan ikut jumlah lebar template
  clear:both;
  margin:0 auto;
  padding-top:15px;
  line-height: 1.6em;
  text-transform:uppercase;
  letter-spacing:.1em;
  text-align: center;
}

6. Cari coding

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes">
</b:section></div>

Jika sudah ada kandungan, coding akan lebih panjang.

7. Copy coding diatas dan pastekan serta merta dibawahnya. Buang kandungan widget jika ada pada coding yang anda paste td. Jika tidak faham lihat coding dibawah.

<div id="sidebar-wrapper">
<b:section class="sidebar" id="sidebar" preferred="yes"> 
<b:widget id="Profile1" locked="false" title="About Me" type="Profile"> 
<b:widget id="BlogArchive1" locked="false" title="Blog Archive" type="BlogArchive"> 
<b:widget id="Label1" locked="false" title="Labels" type="Label"> 
</b:widget> 
</b:widget></b:widget></b:section></div>


<div id="sidebar1-wrapper">
<b:section class="sidebar" id="sidebar1" preferred="yes"> 
</b:section> </div>

1) Jika anda mengikut langkah diatas. Kedudukan kedua-dua sidebar akan berada disebelah kanan.

2) Untuk menukarkan sidebar kedua-dua belah kiri cuma tukarkan css main-wrapper float dari ke $startSide$endSide dan sidebar-wrapper dari $endSide ke $startSide.

3) Untuk menukarkan main wrapper ditengah2 antara sidebar. tukarkan css sidebar1-wrapper float dari $endSide ke $startSide. Kemudian tukarkan html coding sidebar baru diatas coding main wrapper. Lihat contoh dibawah.

<!-- additional sidebar start -->
<div id='sidebar1-wrapper'>
<b:section class='sidebar' id='sidebar1' preferred='yes'>
</b:section>
</div>
<!-- additional sidebar end -->    
<div id='main-wrapper'>
<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

Kebanyakan template tidak menggunakan variable $startSide dan $endSide. Jika begitu, tukarkan $startSide dengan left dan $endSide dengan right.

---

Blog
Gadget

Jika anda sukakan article ini,linkkan kembali...

<a href="http://syoknyerblogging.blogspot.com/2010/12/module-8-cara-menambah-kolum-atau.html">Module 8: Cara menambah kolum atau sidebar pada template blogspot</a>