adyatama blog <data:blog.pageName/> ~ <data:blog.title/>

Selasa, 14 Agustus 2012

0 Cara membuat kolom footer menjadi tiga bagian

cara membuat kolom footer menjadi tiga bagian
Apa itu footer?? footer di blogspot adalah catatan kaki yang letaknya berada di catatan kepala (header) dan berada pada posisi paling bawah layout. Di kesempatan ini saya akan memberikan contoh bagaimana Cara membuat kolom footer menjadi tiga bagian seperti yang terlihat pada gambar disamping. Sebelum memulai tips ini pindah dulu widget sobat yang ada di kolom footer ke side bar.



Cara membuat kolom footer menjadi tiga bagian
  • Masuk dashboard blogger
  • Pilih template klik edit HTML beri centang pada expand widget template
  • Gunakan (Ctrl+F) dan cari kode ini ]]></b:skin>
  • Pastekan kode dibawah ini diatas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
  • Selanjutnya cari kode dibawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
  • Jika sudah ketemu, hapus kode <b:section class='footer' id='footer'/> ganti dengan kode dibawah ini
<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>
  • save template dan lihat hasilnya...
baca juga artikel ini Cara membuat kolom footer menjadi tiga bagian

Berlangganan artikel via email!

Follow us!

Ditulis Oleh : Unknown ~ Adyatama Blog

Anda sedang membaca sebuah artikel yang berjudul Cara membuat kolom footer menjadi tiga bagian,, Semoga artikel tersebut bermanfaat untuk anda ....

:: Thank you for visiting ! ::

 

adyatama blog Copyright © 2011 - |- Template created by mandala wira adyatama - |- Powered by blogger team

>