Selasa, 17 Maret 2009

Membuat Footer Multi Kolom

Footer multi kolom sudah lama saya gunakan di blog ini, tapi saya masih bingung mau ditaruh apa multi kolom tersebut. Untuk membuat footer multi kolom kita hanya dituntut untuk cermat untuk melihat kode html di paling bawah pada menu edit html, agar tidak bingung ikuti langkah-langkah berikut :

  • Klik Tata Letak
  • Klik tab Edit Html
  • Lalu cari kode seperti ini

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

  • Tapi ada juga yang seperti ini, tapi prinsipnya sama

    <div id='footer-wrap1'><div id='footer-wrap2'>
    <b:section class='footer' id='footer'>
    <b:widget id='Text1' locked='false' title='' type='Text'/>
    </b:section>
    </div></div>

  • Lalu ganti kode berwarna merah dengan kode seperti 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><!--kolom pertama-->

    <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><!--kolom kedua-->

    <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><!--kolom ketiga-->

    <div style='clear:both;'/>
    <p>
    <hr align='center' color='#5d5d54' width='90%'/></p><!--garis horisontal-->

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

Sedikit tambahan bahwa kode merah dapat diganti dengan presentase sesuai kawan, tapi jangan sampai lebih dari 100%, kode merah adalah kode untuk mengganti lebar widget.

  • Setelah itu, letakkan kode ini di atas kode ]]></b:skin>

    #footer-column-container {
    clear:both;
    }

    .footer-column {
    padding: 10px;
    }

  • Lalu klik simpan
Jika kawan sudah berhasil, silahkan kawan cek pada tab elemen halaman, maka akan ada elemen seperti ini di bawah elemen post

Udah deh segitu aja hari ini, maap sorry karena gak bisa posting artikel yang banyak akhir2 ini, itu karena ada pengganggu kelas berat....hehehe.......

4 komentar:

  1. Terima kasih atas kunjungannya.

    Blog yang bagus. Banyak ilmu IT yang bisa didapat. :-)

    BalasHapus
  2. Thank's infonya bro aq masih newbie nech mohon bimbingannya...

    BalasHapus
  3. thanks infonya...dah berhasil di terapkan

    BalasHapus
  4. makasih banyak lho mas tas ilmunya moga dapet balesan yang lebih dai yang Maha Kuasa. soalnya saya dah beberapa kali coba "multi kolom" dari beberapa Blog jempolan malah nggak bisa. eh... taunya yang manjur dan cocok dengan template saya cuma "multi kolo"nya Mas...

    sekali lagi terima kasih banyak

    BalasHapus

Sialahkan kawan berkomentar tentang artikelnya...karena komentar kawan sangat berarti bagi blog ini...^_^ salam Blogger