Selamat datang di Blog Haekal Fikri

Cara Membuat Footer 3 Kolom

Written By Haekal Fikri On Saturday, January 19, 20130 comments


Cara Membuat Footer 3 Kolom


Cara Membuat Footer 3 Kolom 
Sobat tau kan footer...?

Footer adalah istilah yang biasa dipergunakan dalam pemrosesan blog. Footer adalah bagian pada blog yang ditempatkan pada bagian bagian bawah blog, dan diisi dengan credits pembuat template blog tersebut.

Terus apa yg mau di lakukan dengan footer..?

Nah..disini kita akan sedikit memodifikasi bagian bawah blog tersebut agar lebih menarik. Disini kita akan membagi footer manjadi 3 bagian, yg masing-masing bagian bisa sobat isi dengan widget semau sobat. Jadi ini dia caranya...!!!



  • Login Ke Blogger
  • Pergi ke template >> Edit HTML >> Centang Expand Template Widget
  • Cari kode ]]></b:skin> Bisa sobat gunkan F3 atau Ctrl+F untuk mencari kode tersebut dengan cepat.
  • Letakan kode di bawah ini tepat di atas kode ]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
  • Selanjutnya cari kode <div id='footer'> Atau id='footer' 
  • Copy dan pastekan kode di bawah ini tepat di bawah kode <div id='footer'> Atau id='footer' 
<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='#ffae00' 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>


  • Simpan dan lihat hasinya.
PASANG IKLAN
Share this article :

Hal-Hal Yang Yang Perlu Di Ketahui Sebelum Berkomentar!

1. Jangan Menggunakan Link Hidup Kecuali Penting
2..Komentar Yang Relevan Akan Saya Balas
3.Untuk Menggunakan Emoticon Klik Emoticon Terlebih Dahulu Untuk Mendapatkan Kode

Note:Komentar Anda Terlebih Dahulu Di Moderasi Untuk Tidak Terjadi Pelanggaran !
 
About | Ads | Sitemap | Privacy Policy | Term Of Service | Forum | Follow ! | Back to top
Copyright © 2018 HF Blog - Some Right Reserved | Design by Haekal Fikri | Created by Maskolis | Aa Sholah
Terima Kasih Atas Kunjungannya
Cara Membuat Footer 3 KolomOops ! | Error 404