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

Tips² Terkait