membuat kolom footer blog

Baiklah pada hari ini saya akan sharing cara membuat kolom footer blog di blogger dengan multi kolom yaitu 2, 3, atau 4 kolom. Problem tentang kolom footer blog ini sering sekali kita temukan di saat kita download template dari situs penyedia template atau dari default blogger sendiri dan disana tidak menyediakan widget pada footer untuk kita menempatkan elemen blog yang kita anggap pantas untuk di taruh di bagian tersebut. dan juga sebagai salah satu optimasi SEO pada loading blog.

Memang sharing cara membuat kolom di footer ini terbilang basi karena sudah banyak sekali yang posting disana - sini, tapi gak apa-apalah dari pada saya vakum posting beberapa minggu :P

Oke bagi yang ingin mempunyai Kebutuhan akan kolom pada bagian footer blog, langsung saja kita praktek.
Hasilnya akan seperti Blog saya ini : 


1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, karena takut malah bikin pusing :D

2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika terjadi galat atau anda memang kurang puas terhadap hasilnya.

3. Setelah itu, cari kode ]]></b:skin> dengan menekan ctrl+f

4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>

/* BOTTOM-BAR */

#bottom-bar {
overflow:hidden;
background:#eaeaea;
margin:0;
padding:10px;
border-top:1px solid #fafafa;
display:block;
}
#bottom-bar h1, #bottom-bar h2, #bottom-bar h3 {
padding:3px 0;
font-size:15px;
font-weight:bold;
text-transform:uppercase;
border: 1px dotted #CCC;
background: #004083;
color: white;
text-align: center;
}
.footer-column {
padding: 10px;
}

5. Cari lagi di find kode yang kira-kira seperti ini :

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

atau

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

6. Setelah ketemu, tambahkan kode di bawah ini tepat di bawah  <b:section class='footer' id='footer' showaddelement='yes'/>atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )

Jika ingin membuat footer 2 kolom. Gunakan kode ini :

    <div id='bottom-bar'>

    <div id='footer1' style='width: 50%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 50%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div style='clear:both;'/>
    </div>

Jika ingin footer 3 kolom. Gunakan kode ini :

    <div id='bottom-bar'>

    <div id='footer1' style='width: 33%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 33%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 33%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/>
    </div>

Membuat footer menjadi 4 kolom. Gunakan kode ini :

    <div id='bottom-bar'>

    <div id='footer1' style='width: 25%; float:left;
    margin:0; text-align:left;'>
    <b:section class='footer-column' id='col1'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer2' style='width: 25%; float: left;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2'
    preferred='yes' style='float:left;'/>
    </div>

    <div id='footer3' style='width: 25%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3'
    preferred='yes' style='float:right;'/>
    </div>

    <div id='footer4' style='width: 25%; float: right;
    margin:0; text-align: left;'>
    <b:section class='footer-column' id='col4'
    preferred='yes' style='float:right;'/>
    </div>

    <div style='clear:both;'/>
    </div>

7. Jika sudah klik Save Template. Lalu klik Page Element untuk melihat hasilnya.

NB : Untuk yang berwarna Merah Silakan Ubah Sendiri, saya Rasa Anda Mengerti itu apa

Salam Blogger