Menambah Kotak Pada Footer

Footer adalah salah satu bahagian penting pada satu² blog. Biasanya kita akan isikan dengan copyright, jenis template atau sebagainya. Boleh juga diisi dengan segala macam widget. Ok kali ini kita akan cuba membahagikan footer ini kepada 3 colom. Caranya..

1. Macam biasa terus ke bahagian Edit HTML. Jangan tanda pada kotak Expand Widget Template. Sebelum tu backup template dengan Download Full Template untuk langkah berjaga2. Tambahkahkan kod CSS ini sebelum </b:skin>.

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

2. Kemudian cari kod berikut.

<b:section class='footer' id='footer'/>

3. Kalau xwujud, cari yang seakan2 dengannya. Dah jumpa, gantikan dengan kod dibawah.

<div id='footer-column-container'>

<div id='footer2' style='width: 30%; float: left; margin:0; text-align: left;'>

<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

<div id='footer3' style='width: 40%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>

<div id='footer4' style='width: 30%; float: right; margin:0; text-align: left;'>

<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p>
<div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>

<b:section class='footer' id='col-bottom' preferred='yes'>
<b:widget id='Text2' locked='false' title='' type='Text'/>
</b:section>

</div>
<div style='clear:both;'/>

</div>

4. Kod berwarna merah adalah warna garisan dibawah colom tersebut. Antum boleh tukar warnanya mengikut citarasa masing2. INI KOD WARNA. Boleh preview tuk lihat hasilnya, jika berhasil klik butang save..

Selesai..

Sumber Asli : BlogerBuster

Menambah Lowbar Pada Template

Atas permintaan dari seorang sahabat yang ingin menambah beberapa colom dibahagian bawah template. Macam blog ni la. Sekaligus dapat menjimatkan ruang yang terhad pada sidebar. Ok terus kepada cara penanaman kod yer..

1. Macam biasa loggin dan terus ke bahagian Edit HTML.

2. Tambahkan kod css ini dimana yang Antum suka, yang penting sebelum kod ]]></b:skin>.

/* ----- LOWER SECTION ----- */
#lower-wrapper {
margin: 0px 0px 0px 0px;
padding: 0;
width: 865px; /* Panjang kotak utama */
font: georgia;
color: #0066cc;
background: #000000; /* Background Kotak Utama */
border: 3px solid #F2F2F2; /* Border Kotak Utama */
}
#lowerbar-wrapper {
float: left;
margin-left: 10px;
padding: 0px 0px 0px 0px;
width: 200px; /* Panjang Lowerbar */
line-height: 1.0em;
background: #D8D8D8; /* Background Lowerbar */
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 */
}
#lowerads-wrapper {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 840px;
text-align: center;
background: #D8D8D8;
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 */
}
.lowerbar {margin: 0; padding: 0;}
.lowerbar .widget {
float: left;margin-left: 10px;
padding:0px;
}
.lowerads {margin: 0; padding: 0;}
.lowerads .widget {margin: 0; padding: 10px 0px 0px 0px;
}
.lowerbar h2 {
margin-left: 7px;
padding: 5px;
color: #ffff66;
font: georgia;
font-weight: bold;
font-size: 10px;
border: 3px ridge #F2F2F2;
text-align: center;
text-transform:none;
background:#000000;
}
.lowerads h2 {
margin-left: 7px;
padding: 5px;
color: #ffff66;
font: georgia;
font-weight: bold;
font-size: 10px;
border: 3px ridge #F2F2F2;
text-align: center;
text-transform:none;
background:#000000;
}
.lowerbar ul {
list-style:none;
margin-left:0px;
padding:5px;
}
.lowerbar ul li {
list-style: none;
background: url(alamat icon Antum) no-repeat;
margin:0;
padding:0px 0 2px 19px;
line-height: 1.3em;
}
.lowerbar a {color: #006699; text-decoration: bold;}
.lowerbar a:hover {text-decoration: none;color: #C94093;
}
.lowerbar a:visited {text-decoration: none; color: #6131BD;}

3. Perhatikan kod2 diatas, cuba suaikan dengan template Antum. Tengok kod2 berwarna merah. Kod Warna Disini. Seterusnya cari kod ini..

<div id='footer-wrapper'>

4. Dah jumpa tambahkan kod berikut diatasnya.

<div id="lower-wrapper">
<div id="lowerads-wrapper">

<b:section class="lowerads" id="lowerads" preferred="yes">
</b:section>
</div>

<div style="clear: both;">

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

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

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

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

<div style="clear: both;">

</div> <!-- end lower-wrapper --></div></div>

5. Selesai bahagian penanaman kod..Sebelum save lebih baik Preview dulu. Kalau berhasil Alhamdulillah, jika tidak, jangan sedih.. Mesti ade perbezaan pada kod template Antum..Cuba alihkan kod pada step 4..Mesti Berani mencuba yer..

p/s : Kalau ade kemusykilan, nyatakan pada komen dibawah yer...

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