Pages

Kamis, 17 Maret 2011

Cara Membuat Footer Menjadi 4 Kolom

Seperti janji Karya Anak Kidoel sebelumnya yaitu Karya Anak Kidoel akan memberikan tips lanjutan tentang membuat Footer menjadi Beberapa kolom alias multi kolom , Dan janji tersebut akan Karya Anak Kidoel tepati setelah sebelumnya Karya Anak Kidoel memberikan tips tentang Cara Membuat Footer Menjadi 3 kolom dan cara membuat footer menjadi 2 kolom ,nahh dalam postingan kali ini Karya Anak Kidoel akan memberikan tips tentang Cara Membuat Footer Menjadi 4 Kolom . apa masih mau tambah lagi kolom footernya ? hehehe...



Jangan kebanyakan iia sobat kolom footernya,hehehe nanti sobat sendiri yang bingung mau di apakan itu footer .tapi buat sobat yang masih kurang dengan kolom footernya bisa langsung ikuti langkah-langkah Cara Membuat Footer Menjadi 4 Kolom di bawah ini .



Cara Membuat Footer Menjadi 4 Kolom



1.Seperti biasa Login Dulu ke blogger.



2.Klik Tata Letak.



3.Klik Edit HTML.



4.Selanjutnya silakan sobat cari kode ]]></b:skin> .



5.Jika sudah ketemu Copy dan paste kode di bawah ini tepat di atas kode ]]></b:skin> .



#footer-column-divide {

clear:both;

}

.footer-column {

padding: 10px;

}



6.Selanjutnya silakan sobat cari kode dibawah ini .



<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>



7.Jika sudah ketemu Hapus kode <b:section class='footer' id='footer'/> kemudian ganti bengan kode dibawah ini .











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



<div id='footer1' style='width: 25%; 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: 25%; 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: 25%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col3'

preferred='yes' style='float:right;'/>

</div>



<div id='footer4' style='width: 25%; float: right;

margin:0; text-align: left;'>

<b:section class='footer-column' id='col4'

preferred='yes' style='float:right;'/>

</div>


8.Klik Simpan Template .



9.Jika berhasil maka hasilnya adalah seperti di bawah ini .







10.Selamat Mencoba..



Tidak ada komentar:

Posting Komentar

 

Sample text

Sample Text

Sample Text