Translator

Senin, 10 Mei 2010

Cara Menambahkan 2 Kolom Di Bawah Footer Pada Blog "Template Harbor"

Footer bawaan dari "Template Harbor" hanya 1 kolom. Agar kita memiliki Footer 2 kolom dibawah Footer default, sedikit kita lakukan modifikasi pada template tersebut. Mari kita ikuti langkah-langkahnya sebagai berikut :

1. Login ke blogger.

2. Klik Tata Letak.

3. Klik Edit HTML.

4. Cari kode ]]></b:skin> (Biar lebih mudah mencarinya, tekan tombol CTRL+F).

5. Selanjutnya copy dan paste kode berikut tepat di atas kode ]]></b:skin> .

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

6. Kemudian Cari kode dibawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

7. Jika sudah ketemu, Hapus </div> dibawah kode <b:section class='footer' id='footer'/>
    karena sudah ada gantinya.
    Tambahkan kode dibawah ini tepat dibawah kode <b:section class='footer' id='footer'/>.
 
<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:center;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'>
</b:section>
</div>

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

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

Sehingga kodenya menjadi seperti ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
<div id='footer-column-divide'>

<div id='footer1' style='width: 50%; float:left; margin:0; text-align:center;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>

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

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

8. Klik SIMPAN TEMPLATE dan selesai.

Catatan : 
Penambahan kode script seperti ini bisa langsung dilakukan jika pada footer default dari "Template Harbor" tersebut belum ditambahkan apa-apa, baik gadget ataupun yang lainnya. 
Jika sudah terlanjur anda menambahkan sesuatu di footer default tersebut, pindahkan dahulu ke tempat lain, lalu terapkan seperti langkah-langkah diatas.

0 komentar:

Poskan Komentar

Tulis Komentar Anda Dibawah Ini :