Cara membuat Footer menjadi multi Kolom

Tips berikut akan saya share kepada pengunjung sekalian, yaitu tentang cara menjadikan footer menjadi beberapa kolom.

Banyak manfaat mengapa kita menjadikan beberapa kolom, antara lain lebih menghemat space serta menjadikan Blog lebih menarik. Untuk tips menjadikan multi kolom ini kita hanya menambahkan kode php pada file style.css (stylesheet) dan file footer.php.

Baik , kita langsung pada tehnis pemasangannya pada Blog :

1. Buka file style.css melalui menu appearance->editor kemudian pilih file style.css, kemudian masukkan kode script dibawah ini pada baris terahir, berikut kodenya :

#footercolumns {padding:0em 0 0 2%}
#footercolumns .block {float:left; width:32%; margin:0 0 0 1%}
#footercolumns .first, * html #footercolumns .first{clear:both; margin:0}

Keterangan : untuk Width atau angka yang saya beri warna merah isi dengan lebar kolom dalam persen demikian juga margin atau angka yang berwarna hijau isi dengan margin kiri dan kanan, sebagai contoh diatas karena akan membuat 3 kolom maka masing masing kolom berjarak 32, untuk 2 atau 4 kolom anda bisa membagi sendiri sesuai selera anda.

2. Buka file footer.php melalui menu appearance->editor kemudian pilih file footer.php, kemudian masukkan kode script dibawah ini, dan posisinya sesuaikan dengan selera anda, berikut kodenya :

<div id="footercolumns">

<div class="inside">
<div class="block first">
<h3>First Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>

<li>And some more stuff</li>
<li>Still more stuff</li>
</ul>
</div>
<div class="block">

<h3>Second Column of Stuff</h3>
<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>

<li>Still more stuff</li>
</ul>
</div>
<div class="block">
<h3>Third Column of Stuff</h3>

<ul>
<li>Here is some stuff.</li>
<li>And some more stuff</li>
<li>Still more stuff</li>

</ul>
</div>
</div>
</div>
<br clear="all" />

Keterangan : Untuk yang berwarna merah isi dengan yang akan anda masukkan kedalam kolom 1,2 dan 3.
3. Selesai, silakan anda coba Blog anda.
Sebagai Contoh pada Footer Blog ini sudah saya jadikan 3 kolom ( Jika masih ada, karena saya sering rubah layout blog ini untuk tutorial)

Artikel yg mungkin berkaitan :

http://www.yasinku.com/2011/09/cara-membuat-footer-menjadi-multi-kolom/

Cara membuat Footer menjadi multi Kolom

0 komentar:

Posting Komentar