Friday, August 24, 2012

Cara Membuat Footer 3 Kolom Dengan Background

Cara Membuat Footer 3 Kolom Dengan Background- Kadang kita membutuhkan tempat untuk menyimpan widget-widget kita tetapi halaman blog kita sudah penuh terisi tapi jangan khawatir karena disini kita akan membahas tentang Cara Membuat Footer 3 Kolom Dengan Background karena tidak semua template mempunyai footer 3 kolom ini.

 Ini adalah screen shot gambar template sebelum membuat footer 3 kolom

 


 Gambar template ini sesudah  membuat footer 3 kolom

 


Tertarikah sobat semua untuk dapat membuatnya? Baik saya akan memulai langkah-langkahnya
 
Cara Membuat Footer 3 Kolom Dengan Background 
 
  1. Login ke blogger dan masuk ke Dasbor.
  2. Klik Rancangan, lalu pilih menu Edit HTML (Jangan Centang "Expand Template Widget")
  3. Cari kode ]]></b:skin>
  4. Letakkan kode CSS berikut ini diatas ]]></b:skin>


#footer-column-container {
clear:both;
}
.footer-column {
background:#444 url(http://i1237.photobucket.com/albums/ff473/muhammadsuteja/footerbawah.jpg) no-repeat; width:900px; position:relative; clear:both; margin:0 auto; float:left; padding:5px 0 10px 0; color:#fff
}


Catatan : Untuk warna backround silahkan ganti http://i1237.photobucket.com/albums/ff473/muhammadsuteja/footerbawah.jpg ini dengan gambar yang di inginkan.

5.Cari Kode <!-- end content-wrapper --> dan letakkan kode dibawah ini tepat diatasnya

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

 
6.Simpan Template

Demikian turitorial Cara Membuat Footer 3 Kolom Dengan Background yang dapat saya jelaskan, selamat mencoba !

G+

Komentar Anda

 
Indoking (Kumpulan Berbagai Macam Informasi) © Copyright 2015 - Designed by Muhammad Iqbal
Back to top
Selamat Datang di www.indoking.blogspot.co.id (Download Mp3, Software, Games, Film, ebook, Chord Gitar, Tips and Trick, Operator Sekolah, Android, dll). Terima Kasih Atas Kunjungannya, Jangan lupa Komentarnya, Dan Berkunjunglah Kembali Untuk Mendapatkan Informasi Terbaru 2016.