Rabu, 09 Mei 2012

membuat footer multi kolom blogger


16.15 |


Biasanya beda template ukuranya berbeda-beda pula,agar ukuranya sesuai dengan template yang sobat miliki di sini ukuranya kita buat persen (%),sehingga kita tidak terlalu kebingungan mengganti ukuranya.
Untuk membuatnya mari kita lihat langkah-langkah di bawah ini:

  • Login ke blog sobat.
  • Klik tata letak.
  • Pilih edit HTML.
  • Jangan kasih centang pada expand widget.
  • Cari kode ]]></b:skin> dan letakkan kode di bawah ini di atasnya,hingga posisinya sebagai berikut:

    /* footer_wrapper
    ---------------------------- */
    #footer_wrapper{
    width: 100%;
    position: relative;
    float: left;
    background:#ff69b4;
    border: px solid #ff0000;
    padding:%;
    }

    #footer_wrapper1{
    float:left;
    width:30%;
    margin:1px;
    background:#7cfc00;
    padding:1%;
    }

    #footer_wrapper2{
    float:left;
    width:30%;
    margin-top:1%;
    margin-bottom:1%;
    background:#7cfc00;
    padding:1%;
    }

    #footer_wrapper3{
    float:left;
    width:30%;
    margin:1%;
    background:#7cfc00;
    padding:1%;
    }

    ]]></b:skin>
  • Kemudian tarik ke bawah pada bagian body temukan kode sebagai berikut:

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
  • Jika sudah ketemu letakkan kode di bawah ini di atasnya hingga posisinya sebagai berikut :

    <div id='footer_wrapper'>
    <b:section class='footer' id='footer_wrapper1'/>
    <b:section class='footer' id='footer_wrapper2'/>
    <b:section class='footer' id='footer_wrapper3'/>
    </div>

    <div id='footer-wrapper'>
    <b:section class='footer' id='footer'/>
    </div>
  • Dan lihat hasilnya pada tata letak,untuk mencoba tambahkan gadget.

    Catatan: Kode yang berwana merah adalah kode yang asli sedang yang hitamadalah kode yang ditambahkan.
semoga ber manfaat 
jangan lupa koment


You Might Also Like :


0 komentar:

Posting Komentar