Membuat Widget Footer Multi Kolom Diblog

abitalita

Tutorial Blog

11.03.2012

1 Komentar

Pada saat kita menerapkan tempalte di web/blog kita, kadang ada saja satu dan lain hal yang menurut kita kurang pas dilihat misalnya tidak adanya kolom widget footer sehingga kita merasa kurang adanya ruang untuk menempatkan widget untuk mempercantik blog kita.sedangkan kita sudah terlanjur menyukai template tersebut.

Tapi sobat tidak usah khawatir karena pada darasnya template yang sudah jadi itupun masih bisa kita modifikasi sedemikian rupa sehingga menghasilkan tampilan sesuai dengan keinginan kita.salah satunya adalah dengan memodofikasi untuk menambahkan 2,3 atau 4 kolom foofter.pada blog.

Sekarang bagaimana cara menambahkan kolom footer tersebut diblog kita? berikut langkah langkah cara membuat footer multi kolom diblog sobat :

1. Masuk dulu ke Dashboard atau ke blogger.com
2. Terus pilih Layout  dan  Edit HTML
3. Sebelumnya ada baiknya sobat  Download Full Template dulu sebagai backup jika ada masalah.
4. Kalau sudah, sobat cari kode ]]></b:skin>
5. Kemudian letakan kode berikut diatas ]]></b:skin>

Kode 1:

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

6. Jika Sudah selanjutnya sobat cari kode  <div id='footer-wrapper'> <b:section class='footer' id='footer'/> </div>

7. Jika sudah ketemu silahkan sobat ganti kode yang berwarna biru dengan kode dibawah ini :

Untuk 2 kolom Footer

Kode 2:

<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; 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: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>

Untuk 2 kolom Footer

Kode 3:

<div id='footer-column-divide'>
<div id='footer1' 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='footer2' 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='footer3' 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;'/>
</div>

Untuk 2 kolom Footer

Kode 4:

<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>
<div style='clear:both;'/>
</div>

8. Terakhir simpan template sobat.
Demikian cara membuat Footer Multi kolom diblog,semoga membantu......