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.

Bagaimana Caranya?

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>

Ubah kedudukan sidebar

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>

Perhatian:

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










Share Gadget
Stumble
Delicious
Technorati
Twitter
Facebook
Blog
Gadget


Jika anda sukakan article ini,linkkan kembali...



Dicatat oleh Thalhah Amir on Khamis, 2 Disember 2010

0 ulasan

Catat Ulasan

Cari Blog Ini

Pengikut

Pengikut Facebook

Informasi

SyoknyerBlogging adalah sebuah blog tutorial untuk bloggers yang menggunakan platform blogspot. Semua tutorial disini adalah daripada pengalaman sy berblogging selama 3 tahun. Sy bukan untuk mengajar tetapi lebih kepada berkongsi. Harap anda gembira disini. (^^,)

Mengenai Saya

Foto saya
Sy sangat sukakan web. Seorang Programmer. Pemilik Syoknyerblogging
Copyright 2010 | SyoknyerBlogging | Belajar Blogging Dalam Bahasa Melayu
Zengard Template designed by the Jinsona Design and XML coded by CahayaBiru.com