MEMBUAT FOOTER MULTI KOLOM BLOGGER



D
engan satu kolom footer rasanya masih kurang,ini yang sering dirasakan bagi mereka yang suka mempercantik blognya dengan berbagai pernak-pernik. Bagi saya sendiri footer ini sangat berguna yang saya anggap fungsinya hampir sama dengan sidebar.

Yang sering saya lihat diberbagai blog mereka senang menggunakan footer dengan tiga kolom,sebenarnya ini tergantung selera masing-masing orang. Bagaimana cara membuatnya
di sini akan kita bahas bersama.

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 hitam adalah kode yang ditambahkan.
Sebenarnya cara membuat multi kolom pada footer hampir sama dengan menambah atau membagi kolom header,jika sobat ingin tahu bisa lihat di sini.

Semoga bermanfaat.



5 komentar:

Reyz mengatakan...

MAKASIH BANGAT INFO_A.. DAH CAPE JUGA SLAMA INI NYARI TUTOR_A, TP BLUM ADA YANG COCOK SAMA TEMPLATE AQ. EH.. GAK NYANGKA T'NYATA NEMU DISINI.. MKASI BGT..
SALAM.. YA!!

Darmasena mengatakan...

@ Reyz :
Salam balik,trmksh atas kunjungannya !

Jero Atb mengatakan...

saya sdh bwt tp blm jadi,

Yusuf Supriyanto mengatakan...

bingung gimana nihh

pesantren kader berdaya mengatakan...

mau tanya masalah menu horizontal, punyaku menu dan sub menunya sudah jadi cuma bingung cara membuat link agar sub menu konek dgn file sesuai judul sub.. mohon penjelasan ilmunya, namanya belajar blog.. thanks..

:) :( ;) :D ;;) :P :-* :-o :(( =)) ~x(
Posting Komentar