Pages

6 Des 2010

Menambah 3 atau 4 kolom footer di Blog

Kali ini saya akan share bagaimana mengkonversi ada footer Blogger (Blogspot footer) menjadi 3 atau 4 kolom. Dengan kolom lebih di footer Blogger Anda, Anda akan memiliki ruang ekstra untuk menampung widget lebih seperti foto Flickr dan update Twitter. Juga anda akan dapat menempatkan widget lebih sering digunakan seperti komentar recents, arsip, pengikut, Tentang Saya dll di bagian bawah template Anda sehingga hanya widget yang paling penting dimuat pertama.

Tweak ini melibatkan menambahkan kode ke bagian footer dari template yang ada Blogger Anda untuk mengubahnya menjadi 3 kolom atau 4 kolom.Untuk hasil terbaik template Blogger dengan lebar sekitar 900px adalah yang terbaik.

Bagaimana Menambahkan Footer 3 Kolom ke Blogger

  1. Login ke Blogger jika belum login

  2. Arahkan ke> Design

  3. Arahkan ke Layout> Edit HTML

  4. Back up template Anda sebagai tindakan pencegahan dengan men-download ke komputer Anda

  5. Temukan bagian berikut dalam template Blogger Anda

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

    Jika Anda mengalami kesulitan mencari bagian ini berusaha mencari footer-wrap atau sesuatu yang serupa karena ini adalah bagian yang kadang-kadang lain di beberapa template.

  6. Untuk Menambahkan Footer 3 Kolom ke Blogger
    Ganti semua kode yang terletak pada Langkah 5 dengan berikut

    <div id='footer-columns'> <div id='footer-columns'>
    <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'> <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'> <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'> <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/> <div style='clear:both;'/>
    </div>

    Untuk Menambahkan Footer 3 Kolom ke Blogger dengan Lower Bagian Footer
    Ganti semua kode yang terletak pada Langkah 5 dengan berikut

    <div id='footer-columns'> <div id='footer-columns'>
    <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'> <div id='footer1' style='width: 30%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/> <b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'> <div id='footer2' style='width: 40%; float: left; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
    </div>
    <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'> <div id='footer3' style='width: 30%; float: right; margin:0; text-align: left;'>
    <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> <b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
    </div>
    <div style='clear:both;'/> <div style='clear:both;'/>
    <p/> <p/>
    <div id='footer-bottom' style='text-align: center; padding: 10px;'> <div id='footer-bottom' style='text-align: center;"> padding: 10px;'>
    <b:section class='footer' id='col-bottom' preferred='yes'> <b:section class='footer' id='col-bottom' preferred='yes'>
    </b:section> </ B: section>
    </div>
    <div style='clear:both;'/> <div style='clear:both;'/>
    </div>


Untuk Menambahkan Kolom Footer 4 ke Blogger
Ganti semua kode yang terletak pada Langkah 5 dengan berikut

<div id='footer-columns'> <div id='footer-columns'>
<div id='footer1' style='width: 25%; float: left; margin:0; text-align: left;'> <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;'/> <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;'> <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;'/> <b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'> <div id='footer3' style='width: 25%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/> <b:section class='footer-column' id='col3' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 25%; float: right; margin:0; text-align: left;'> <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;'/> <b:section class='footer-column' id='col4' preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/> <div style='clear:both;'/>
</div>
  • Simpan perubahan pada template Blogger Anda.
  • Arahkan ke> Elemen Page Layout. Anda sekarang akan melihat sebuah footer 3 kolom, 3 kolom footer dengan bagian bawah atau footer 4 kolom tergantung pada apa opsi yang Anda pilih.
  • Pindahkan gadget yang diinginkan untuk kolom footer Blogger baru. Buat widget baru untuk mengisi kolom footer jika perlu. Simpan perubahan Anda.
  • Klik Lihat Blog untuk mengagumi bagian footer baru Anda




Tidak ada komentar: