Menambahkan Kolom pada Footer


Footer adalah salah satu bagian pening pada blog. Di bagian footer ini, biasanya terdapat credit pembuat templatenya, tanda copyright, dan lain sebagainya. Namun kebanyakan blogger kurang memaksimalkan bagian yang termasuk intim ini. Misal menambahkan kolom pada bagian footer. Nah tutorial kali ini saya akan memberi tau cara menambahkan kolom pada footer, berikut langkahnya :


1. Login ke bloger.com
2. Masuk ke Template --> Edit Html
3. Kemudian Back-Up template anda. Apa gunanya mem backup template ? anda bisa pelajari Disini
4. Centang Expand Template Widget
5. Cari kode berikut :

<div id='footer-wrapper'> <--- Anda cukup cari yg ini saja
<b:section class='footer' id='footer'/>
</div>

6. Ganti kode yang berwarna Merah dengan kode berikut :

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

7. Tambahkan kode berikut, dan letakkan diatas kode </b:skin> :

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

8. Klik Simpan
9. Jadi deh

Keterangan :

- Dibawah 3 kolom tersebut terdapat garis horizontal, kamu bisa ganti warnanya.
- Gantilah dengan kode warna yang anda punyai. Jika anda tidak tahu kode warnanya, anda lihat disini --> http://html-color-codes.com.

Selamat mencoba !! Semoga tutorial kali ini bisa membantu !! Jangan lupa komentarnya lho !!

Related Posts

Menambahkan Kolom pada Footer
4/ 5
Oleh