MEMBUAT FOOTER MENJADI 3 KOLOM

By Edy

Biasanya bagi seorang blogger banyak memiliki kebutuhan atas

blog yang dibuatnya, bisa sebagai media informasi, mencari sedikit
rupaih maupun dollar dengan cara memasang iklan ataupun menjadi seorang
penjual jasa lainnya ataupun blog hanya sebagai ajang kreasi saja. Nah…
tentunya dengan banyaknya kebutuhan tersebut dituntut semakin banyak
pula ruang kosong pada halaman blog tersebut.

Dalam sebuah blog
standart hanya terdapat 2 sampai 3 kolom saja dalam satu halaman yaitu
sisi kiri maupun kanan dan satu buah body text sebagai tempat tampilnya
postingan yang akan ditampilkan.

Namun
sebagian orang, dengan tersedianya beberapa kolom tersebut masih saja
kurang karena banyaknya kebutuhan lainnya. Nah… untuk menyikapi hal
itu, saya akan mencoba untuk memanfaatkan bagian footer agar bisa
dipakai lebih banyak lagi atau dengan kata lain menambah ruang kosong
pada bagian bawah halaman blog biar dapat digunakan untuk hal lain yang
dianggap perlu.

Waduh… sepertinya sudah kepanjangan
komentarnya tentang hal ini, lebih baik kita langsung saja menginjak ke
langkah pembuatannya.

• Masuk ke account blogger anda
• Kemudian pada dashboard, masuk ke layout
• Setelah
  itu, klik Edit HTML dan pada Expand Widget Templates jangan diberi cek,
  karena akan menampilkan script yang tidak diperlukan.
• Sebelum
  melakukan peng-editan terhadap templates anda, jangan lupa untuk
  membackup semua script HTML anda dengan cara menekan Download Full
  Template dan kemudian simpan ketempat yang aman (Ini nantinya
  diperlukan apabila editing yang anda lakukan gagal)
• Kalau sudah selesai, copy – paste CSS Style dibawah ini tepat diatas kode </b:skin>

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

• Kalau sudah langkah selanjutnya adalah mencari kode script seperti dibawah ini

<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

• Kalau sudah ketemu, hapus kode script yang berwarna merah diatas kemudian ganti dengan script HTML dibawah ini

<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='#5d5d54' 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>

• Kalau sudah, silahkan untuk menyimpan pekerjaan anda dengan menekan tombol SAVE.



• Kemudian lihat hasilnya dengan menekan PAGE ELEMENT.

Informasi :

Apabila
ingin melakukan perubahan terhadap warna yang akan dipakai untuk
menyesuaikan dengan blog kepunyaan anda, silakan cari script HTML
seperti dibawah ini, kemudian rubahlah pada script yang berwarna merah sesuai dengan keinginan anda

<hr align='center' color='#5d5d54' width='90%'/></p>

Selamat mencoba, kalau ada kesulitan silakan hubungi saya