Menambah Colom Di Post Body

Alangkah seronoknye mengedit template ni..nak pula bila berhasil kan.. mesti senyum sorang2.. sebenarnya kod2 HTML ni mudah je untuk difahami, kalau hari2 duk mengadap je.. Ok, kali ini Ana nak kongsi cara menambah elements pada post body. Dah lama nak publishkan tapi masa tak mengizinkan. Caranya begini yer.. Disarankan untuk Download Full Template bagi yang masih baru sebagai langkah berjaga2.

1. Masuk ke Edit HTML, tambahkan kod dibawah sebelum kod ]]></b:skin>

/*Kotak Post
-----------------------------*/
#kotakpost h2{
font-size:13px;
font-weight:bold;
color:#B8002E;
border-bottom:2px solid #000000;
padding-left:5px;
}
#kotakpost{
width:530px;
}
#kotakkiri{
width:250px; /*lebar kotak kiri*/
float:left;
margin:4px;
}
#kotakkanan{
width:250px; /*lebar kotak kanan*/
float:right;
margin:4px;
}

2. Perhatikan kod yang berwarna merah diatas, pastikan sama dengan lebar main-wrapper di blog Antum. Kalau nak tahu lebarnya cari kod ini.

#main-wrapper {
width: 410px;

3.Seterusnya bahagikan kotak kiri dan kanan, perhatikan kod biru diatas yer.

4. Selesai langkah pertama, seterusnya cari kod berikut.

<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>

5. Ini paling penting, tambahkan kod dibawah ini. Lihat contoh.

<div id='kotakpost'>
<b:section class='kotakkiri' id='kotakkiri'/>

<b:section class='kotakkanan' id='kotakkanan'/>
</div>

6.Untuk dua kotak dibawah post body tambah begini.

<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 id='kotakpost'>
<b:section class='kotakkiri' id='kotakkiri'/>

<b:section class='kotakkanan' id='kotakkanan'/>
</div>
</div>

7. Untuk dua kotak diatas post body tambah begini.

<div id='main-wrapper'>
<div id='kotakpost'>
<b:section class='kotakkiri' id='kotakkiri'/>

<b:section class='kotakkanan' id='kotakkanan'/>
</div>

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/>
</b:section>
</div>

8. Alhamdulillah selesai dan klik save... Insyaallah akan muncul 2 kotak diatas atau dibawah post body Antum pada page elements.

Selamat mencuba..

Tips² Terkait

Page Elements

• Menambah Kotak Pada Footer
• Menambah Lowbar Pada Template