Berbisnis Online ala Google

Jumat, 08 April 2011

Cara Membuat Footer 3 Kolom di Blogger

Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer tiga kolom, seperti blog ini.
Nah, bagaimana cara menambah footer 3 kolom di Blogger ? Bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna.

Oke, langsung saja ke tutorialnya:

1. Login ke blogger.
2. Klik Rancangan --> tata letak --> Edit HTML
3. Cari kode ]]></b:skin>
4. Copy kode dibawah ini dan paste di atas kode ]]></b:skin>


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


5. Cari kode 

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

6. Hapus kode <b:section class='footer' id='footer'/>

7. ganti kode tersebut dengan kode 

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


<div id='footer1' 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='footer2' 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='footer3' 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;'/>
</div>

8. Simpan Template


Lihat pada Rancangan --> elemen halaman dan akan terlihat seperti gambar dibawah ini.



Good luck... Happy Blogging ^_^

Tidak ada komentar:

Posting Komentar