Cara membuat 3 kolom di atas footer

Cara membuat 3 kolom di atas footer, mungkin sobat pernah pernah mengunjungi blog yang menggunakan wordpress? saya yakin pasti sobat akan menjawab pernah bahkan sering. Kalau jawabanya seperti itu, tentunya pernah juga memperhatikan layout atau desain dari templatenya. Nah jika saya sendiri sering memperhatikan bahwa template wordpress dibagian footer nya sering kali dibuat menjadi multi kolom, ada yang dua kolom, tiga kolom, dan ada juga yang sampai empat kolom.
membuat 3 kolom di atas footer
Mungkin beberapa dari kalian  akan muncul pikiran atau bahkan pertanyaan "apakah bisa template blogger bagian footer nya dibuat menjadi multi kolom?" Saya tegaskan jawabanya adalah "bisa". mau tau caranya? Oke sob, Cara membuat 3 kolom di atas footer bisa sobat lihat di bawah ini:
  1. Login pada blog sobat
  2. Masuk ke halaman template
  3. Edit HTML lalu Lanjutkan
  4. Expand Template Widget
  5. Cari kode ]]></b:skin> letakkan kode di bawah ini di atas kode tersebut
    #footer-bottom {
    width: 900px;background:#fff;
    position: relative;display:inline;
    clear:both;
    margin:0 auto 0;
    color:#000;
    float: left;
    padding:10px;
    }
    #left-bottom {
    width: 270px;
    float: left;display:inline;
    margin:10px 5px 0 5px;
    padding:5px
    }
    #center-bottom {
    width: 280px;
    float: left;
    margin:10px 5px 0;
    padding:5px
    }
    #right-bottom{
    width: 270px;
    float: left;display:inline;
    margin:10px 5px 0;
    padding:5px
    }
  6. Lalu cari kode <div id='footer'> dan letakkan kode di bawah ini di atas kode tersebut
    <div id='footer-bottom'>
    <b:section class='footer-bottom' id='left-bottom' preferred='yes' showaddelement='yes'>
    </b:section>

    <b:section class='footer-bottom' id='center-bottom' preferred='yes' showaddelement='yes'>
    </b:section>

    <b:section class='footer-bottom' id='right-bottom' preferred='yes' showaddelement='yes'>
    </b:section>
    </div>
  7. Simpan
Keterangan:
  • Kode yang berwarna merah adalah ukuran masing - masing kolom, bisa sobat ganti dengan kemauan sobat sendiri
  • Kode yang berwarna biru adalah warna background nya bisa sobat ganti dengan kemauan sobat sendiri.
Bagaimana, mudah kan sob ? Pembuatan kolom yang seperti di atas, biasanya di gunakan untuk widget recent post (artikel terakhir) atau juga recent comments (komentar terakhir). Untuk membuat widget tersebut di lain waktu kapan - kapan akan saya share. Ok ? Sampai Jumpa ;)

5 komentar

  1. Mantap, perlu dicoba ne sob..

    ReplyDelete
  2. kok ditempat saya gak ada kode ini b:section class='footer' id='footer'

    ReplyDelete
  3. Terimakasih kk tutorialnya ok, aku coba

    ReplyDelete
  4. makasih infonya..........kita tunggu kunjungan baliknya ke link kita

    ReplyDelete

Silahkan berkomentar dengan baik dan sopan, komentar berunsur Spam dan Link aktif maupun statis akan dihapus. Demi kenyamanan dan transparansi, mohon maaf komentar "anonymous" tidak akan ditanggapi

 
© 2012 Anjeunn All Rights reserved | Design by Reggy Zian | Powered by Blogger