CARA MEMBUAT FOOTER MULTI KOLOM

Menambah colum pada footer template blog. Bagaimana cara membuat atau membagi footer template blog menjadi 3 colum. Colum footer adalah ruangan colum yang ada di bagian paling bawah template anda. Dengan membagi colum footer menjadi tiga colum bisa anda gunakan untuk menambah widget,iklan,atau apa saja yang anda inginkan.
1. log in ke blogger anda.
2. Click Edit HTML-Jangan centang kotak kecil EXPAND WIDGET !!
3. Cari kode ]]></b:skin> didalam template anda.
4 .Kemudian copy pastekan code di bawah ini tepat di atas kode ]]></b:skin>

/* bottom
---------------------------- */

#bottom {
width: 925px;
position: relative;
clear:both;
margin: 0 auto;
color:#a4e11e;
float: left;
background:#000000;
padding: 15px 0 15px 0;
}

#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ffcc66;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #a4e11e;
}

#bottom ul {
padding: 0;
margin: 0;
}

#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #a4e11e;
}

#bottom ul li a {
display: block;
padding: 0 10px;
color:#a4e11e;
text-decoration: none;

}
#bottom ul li a:hover {
background: #000000;
}

#left-bottom { /* Kode Kolom kiri */
width: 300px;
float: left;
padding-left:10px;
}

#center-bottom { /* Kode Kolom Tengah */
width: 300px;
float: left;
padding-left:10px;
}

#right-bottom { /* Kode Kolom Kanan */
width: 300px;
float: left;
padding: 0 5px 0 10px;
}


5. Kemudian cari kode yang mirip dengan code dibawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

ika anda tidak menemukan code tersebut coba cari kode seperti di bawah ini ;

<b:section class='footer' id='lower-footer' preferred='yes'>

6. Jika sudah ketemu copy paste kode di bawah ini tepat diatas code

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
tadi.

<div id='bottom'>

<b:section class='bottom' id='left-bottom'/>

<b:section class='bottom' id='center-bottom'/>

<b:section class='bottom' id='right-bottom'/>

</div>


Keterangan :
-Angka 925 adalah ukuran lebar keseluruhan template anda jadi anda bisa menggantinya dengan ukuran template anda karena jumlah columnya di bagi 3 maka silahkan anda bagi sendiri untuk 3 colum dengan padding 15 px tiap colum,padding artinya ruangan yang berada diantara 3 colum tersebut.
-Kode a4e11e adalah kode warna garis bawah judul yang anda buat pada setiap kolom nantinya,bisa anda ganti sesuai dengan warna yang anda inginkan. untuk code warna silahkan baca sampai habis artikel ini.
-kode 000000 adalah kode warna back ground,yang bisa anda ganti juga dengan kode warna back ground blog anda.
-Kode a4e11e adalah kode warna border pada setiap kolom ,ganti dengan warna border yang anda inginkan.
-Angka 300 yang warna hijau adalah ukuran lebar kolom sebelah kiri, bisa anda ganti dengan ukuran yang anda inginkan.
-Angka 300 yang warna merah adalah ukuran lebar kolom tengah, bisa anda ganti juga denga ukuran yang anda inginkan.
Angka 300 yang warna putih adalah ukuran lebar colum sebelah kanan, bisa juga anda ganti, yang penting anda sesuaikan ukurannya dengan ukuran lebar keseluruhan template anda,Tinggal anda bagi sendiri kemudian kurangin dengan ukuran padding pada setiap column 15 px. jadi kalo 3 column berarti mempunyai 2 column padding.
Kesimpulannya adalah setiap kode angka yang tertulis dengan warna yang berbeda dengan text artikel bisa anda edit sendiri.

Artikel Terkait: