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 comments:
Post a Comment
Tulis komentar anda dibawah ini: