Membuat Footer Multi Kolom - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Minggu, 06 Maret 2011

Membuat Footer Multi Kolom

Assalamualaikum sobat blogger semua...
Di malam yang sedikit mendung ini saya kembali akan membagikan sedikit tutorial blogger. Pada postingan kali ini kita akan membahas cara membuat footer multi kolom, atau lebih tepatnya membuat tiga kolom di bagian footer.

Membuat footer multi kolom memang sangat berguna untuk menambah koleksi widget kita agar tidak selalu di tempatkan di bagian sidebar.
Secara default template asli blogger tidak terdapat kolom di bagian footer, meskipun banyak template custom yang sudah menyediakan footer multi kolom.

Bagi sobat blogger yang tertarik ingin menambahkan tiga kolom atau add gadget di bagian footer, silahkan ikuti langkah-langkah di bawah ini.

1. Login ke akun blogger
2. Pilih design kemudian edit HTML
3. Jangan lupa Expand Widget Template
4. Untuk menghindari kesalahan, backup template dulu
5. Selanjutnya paste kode di bawah ini DI ATAS ]]></b:skin>

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

6. Langkah selanjutnya temukan kode.

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

7. Lalu pastekan kode berikut DI BAWAH kode di atas.

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

8. Save template
9. Pergi ke elemen laman untuk melihat perubahannya


Semoga barmanfaat.
Alhamdulillah...

24 komentar:

  1. sangat menarik dan berguna . , terima kasih infonya kawan :s

    BalasHapus
  2. rumit juga ya. kadang takut otak atik template

    BalasHapus
  3. Udah dicoba,dan hasilnya MEMUASKAN!!!

    BalasHapus
  4. Wah terima kasih tutorialnya ..... blog saya jadi ada tempat tuk pasang Widget di bawah .... hehehe

    BalasHapus
  5. memang blogg yg keren membuat org pinter lagi makasih ya

    BalasHapus
  6. template saya tidak ada footer kolomnya.. nice info nih

    BalasHapus
  7. sangat menarik dan berguna . , terima kasih infonya ... sukses slalu buat kau

    BalasHapus
  8. Saya coba ah. thanks info nya Bos

    BalasHapus
  9. kok nggak ada gambarnya?
    di blog saya lebih lengkap ada gambarnya :)

    BalasHapus
  10. informasinya sangat bagus sekali...
    saya suka..
    banyak pengetahuan yang saya dapatkan setelah saya berkunjung ke blog ini....

    BalasHapus
  11. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

    BalasHapus
  12. artikel yang anda tulis di blog ini, sungguh sangat memotivasi diri saya untuk trus berkarya, terima kasih semoga kebaikan anda mendapatkan balasa yang lebih baik.

    BalasHapus
  13. trimakasi atas infonya semoga dapat bermanfaat gan

    BalasHapus
  14. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus
  15. Hai..
    kita dari agen poker online papadomino mau memberitahukan bahwa sekarang sedang ada promo bonus yaitu :
    * Bonus Minguuan : 0.5% (setiap senin)
    * Bonus Referral : 20% (seumur hidup)

    Hanya dengan minimal depo & wd Rp 20.000,-
    Proses depo / wd cepat
    100% PLAYER VS PLAYER Tanpa ROBOT
    link pendaftaran : http://papadomino.com/?ref=jesica6413
    Untuk info lebih lanjut silahkan hubungi : 2B4A514B

    * Buat yang suka bermain togel silahkan kunjungi http://www.papa4d2.com/ref.php?ref=jesica
    ;)
    judi poker
    bandar poker
    domino online
    agen poker online
    poker online
    capsa susun
    poker online terpecaya

    BalasHapus
  16. Informasi yang sangat bagus dan berguna. Ditunggu untuk informasi berikutnya. Thanks gan


    bandarq
    Domino 99
    Situs Poker Online
    Domino Qiu Qiu

    BalasHapus
  17. Terima Kasih ya Gan, Artikel yang sangat Bagus dan Bermanfaat.. Update terus dan sukses selalu ya Gan..
    jangan lupa berkunjung yah gan^^
    judi online
    situs judi online
    roulette
    roulette online
    baccarat
    baccarat online
    casino online
    live casino
    agen casino
    judi casino

    BalasHapus

Post Top Ad

Space Iklan