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 {
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..
Tidak ada komentar:
Posting Komentar