cara membuat/mengatur jumlah kolom footer blogger

(isi iklan)

Baiklah pada hari ini saya akan sharing Seperti gambar di atas....

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 padaloading blog.

Oke bagi yang ingin mempunyai Kebutuhan akan kolom pada bagian footer blog, langsung

saja kita praktek.

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>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

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

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='footer-column-divide'>

    <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='footer-column-divide'>

    <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='footer-column-divide'>

    <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.

Semoga sharing tentang cara membuat kolom footer di blogspot ini bisa membantu

dalam modifikasi blog anda.

Judul	cara membuat/mengatur jumlah kolom footer blogger
Deskripsi	Baiklah pada hari ini saya akan sharing Seperti gambar di atas....
Author	Unknown
Author Rating	89,99%/ 100% Suara Dari 9999 Ulasan

Share this with short URL: Get Short URL

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di IDCEPU

Tag : Blogger, TIPS BLOGER