MEMBUAT FOOTER MENJADI 3 KOLOM

MEMBUAT FOOTER MENJADI 3 KOLOM

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

#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> 

Selesai Selamat Mencoba & Jangan Lupa komentarnya ya?