Footer Multikolom Untuk Blogger

Footer Multikolom Blogger
Membuat footer multikolom, atau menambah kolom / widget pada footer. Kalian tentu sering menjumpai template blog yang seperti ini. Dikarenakan setiap template memiliki konsep template yang berbeda, kalian perlu menambahkan kolom sendiri jika template kalian ternyata tidak memiliki kolom. Contohnya template DickeyMaru. Bisa kalian lihat pada footerku terdapat 2 kolom.
Untuk menambah footer, silahkan ikuti petunjuk dibawah ini:
  1. Masuk ke bagian Tata Letak / Design, klik Edit HTML.
  2. BackUp Template kamu untuk berjaga-jaga jika ada kesalahan ketika mengedit template.
  3. Kamu copy kode dibawah ini:
    #dmfootdiv {clear:both;}
    .dmfootwidget {padding: 10px;}
  4. Paste kode tadi tepat diatas kode:
    ]]></b:skin>
  5. Kemudian cari kode seperti ini:
    <div id='dmfoot-wrapper'>

    <b:section class='footer' id='dmfoot'/>
    </div>
  6. Jika kode diatas sudah ditemukan, tugas kalian selanjutnya hanya mengedit yang berwarna merah saja. Kalian ganti kode yang berwarna merah, dengan kode-kode dibawah ini. Tergantung kalian ingin membuat berapa kolom:
    Untuk Membuat 2 Kolom
    <div id='dmfootdiv'>

    <div id='dmfoot1' style='width: 50%; float:left; margin:0; text-align:left;'>
    <b:section class='dmfootwidget' id='dmcolumn1' preferred='yes' style='float:left;'/>
    </div>

    <div id='dmfoot2' style='width: 50%; float: left; margin:0; text-align: left;'>
    <b:section class='dmfootwidget' id='dmcolumn2' preferred='yes' style='float:left;'/>
    </div>

    <div style='clear:both;'/></div>
    Untuk Membuat 3 Kolom
    <div id='dmfootdiv'>

    <div id='dmfoot1' style='width: 30%; float:left; margin:0; text-align:left;'>
    <b:section class='dmfootwidget' id='dmcolumn1' preferred='yes' style='float:left;'/>
    </div>

    <div id='dmfoot2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='dmfootwidget' id='dmcolumn2' preferred='yes' style='float:left;'/>
    </div>

    <div id='dmfoot3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='dmfootwidget' id='dmcolumn3' preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/></div>
    Untuk Membuat 4 Kolom
    <div id='dmfootdiv'>

    <div id='dmfoot1' style='width: 25%; float:left; margin:0; text-align:left;'>
    <b:section class='dmfootwidget' id='dmcolumn1' preferred='yes' style='float:left;'/>
    </div>

    <div id='dmfoot2' style='width: 25%; float: left; margin:0; text-align: left;'>
    <b:section class='dmfootwidget' id='dmcolumn2' preferred='yes' style='float:left;'/>
    </div>

    <div id='dmfoot3' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='dmfootwidget' id='dmcolumn3' preferred='yes' style='float:right;'/>
    </div>

    <div id='dmfoot4' style='width: 25%; float: right; margin:0; text-align: left;'>
    <b:section class='dmfootwidget' id='dmcolumn4' preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/></div>
  7. template kamu.
Jika kamu mengikuti petunjuk diatas, maka footer lama kamu akan berubah menjadi beberapa kolom. Sedangkan jika kamu ingin tetap memiliki footer lama kamu ketika memakai trik ini, kamu ganti kode yang berwarna biru, dengan kode dibawah ini:
<div style='clear:both;'/>
<div id='dmbottfoot' style='display:block;text-align: center; padding:10px;'>
<b:section class='footer' id='dmcolumn-bottom' preferred='yes'>
</b:section>
</div>
Dengan begitu, footer lama kamu tetap ada meskipun kamu telah membuat kolom-kolom untuk footer baru. Selamat mencoba.
Comments

1 comment:

Related posts
Guestbook
Author


© 2008 - 2016 DickeyMaru
Blogger Template Win 8 design by Dark Ard from DeezClan | All rights reversed.
  • Post
  • Comments
  • Related
  • Guestbook
  • Author
  • Other