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.
tau cara namabahin footer 3 kolom manjadi 4 kolom gak
Posted by yasinmarine | 11 November 2008, 2:55 pmsudah tutorial 5 buah seperti ini dari berbagai blog, semanya gak bisa, ada masalah sama “div”-nya katanya…
Posted by idotkontji | 24 November 2008, 6:41 amberkunjung lagi sambil menikmati tutorial
Posted by Seno | 1 Desember 2008, 7:29 pmYASINMARINE = coba dech dikembangkan sendiri dari script diatas, pastinya bisa kokIDOTKONTJI = kalau script diatas sudah di uji coba, lihat hasilnya dibawah blog ini..!!!SENO = Makasih atas kunjungannya, moga bermanfaat
Posted by SURIYADI | 1 Desember 2008, 8:27 pmTanks banget mas…udah saya coba dan hasilnya sangat memuaskan….Oya mas Supriyadi…boleh sekalian tuker link…terimakasih.Saya pasti akan sering mampir kesini..mempelajari artikel2 di sini…oya mas…cara menampilkan artikel terbaru sang master di bawah ini gimana?http://blog-masbudi.blogspot.com/
Posted by blog-masbudi | 1 Februari 2009, 6:26 pmbos MEMBUAT FOOTER MENJADI 3 KOLOMnya kok gagal 2 punya gw kesalahanya ap ci
Posted by customize | 23 Februari 2009, 9:45 pmsama, gw juga gak bisa,ada masalah dengan div, jadi bingung nich
Posted by Ghustie Samosir | 15 Maret 2009, 12:43 ammakasih infonya mas…
Posted by Resep Masakan | 19 Maret 2009, 5:46 pmOk banget, keren infonya, langsung meluncur untuk menekan tombol html. Blog Etam Tenggarong mengucapkan terima kasih. Jauh-jauh dari Kaltim (Tenggarong).
Posted by ipay76.blog.com | 27 April 2009, 1:44 amMas itu kan yang di ubah warna cuma pada garis horizontalnya??? kalau kayak di bawah ini gmn???
Posted by Mohammad Rizky Prasetya Kurniadi | 29 April 2009, 6:08 pmmaksih ya informasinya
Posted by ali febriyanto | 21 Mei 2009, 12:44 pmhello sobat…wah tipnya bagus nih.. ijin copas ah.. btw gimana sekalian aja tuka link
Posted by Saungweb | 5 Juni 2009, 1:54 amnumpang lewat
Posted by pengurus | 10 Juni 2009, 6:00 amterima kasih tips-nya mas, working! sukses buat suriyadi.com
Posted by Haidir | 15 Juni 2009, 2:32 pm