MENGUBAH BAGIAN FOOTER MENJADI TIGA


Kolom template pada bagian footer (bagian bawah, umumnya hanya memiliki satu kolom. Akan lebih menarik jika kolom tersebut kita bagi menjadi tiga bagian.
Template EPG Studio memiliki lebar kolom keseluruhan adalah 1100px atau 1100 pixel. Jadi tips kali ini berpanduan pada lebar kolom template EPG Studio. Bagi anda yang memiliki lebar template yang berbeda dengan EPG Studio dapat anda lakukan perubahan pada angka-angka yang ditampilkan nantinya.
Sebelum menambah 3 kolom pada bagian footer, sebaiknya anda lihat dulu berapa lebar keseluruhan kolom template anda (lihat pada bagian outer wrapper). Katakanlah lebarnya 1100px. Jadi dalam penambahan 3 kolom template tersebut, anda harus berpatokan pada lebar outer wrapper tadi.
Setelah mengotak atik angka tadi sehingga pas untuk template anda, kita masuk pada langkah-langkahnya.
  1. Masuk ke Blogger.
  2. Pilih Rancangan bagian Edit HTML.
  3. Kasih tanda cek pada Expand Template Widget.
  4. Cari kode ]]></b:skin> , kemudian copy kode dibawah ini dan letakkan tepat diatasnya.

    #footer-column-container {
    clear:both;
    }
    .footer-column {
    position:relative;
    clear:both;
    float:center;
    padding:10px 0 10px 0;
    }

  5. Cari kode dibawah ini pada bagian </body> .


    <b:section class='footer' id='footer'> 

  6. Ganti kode diatas dengan kode dibawah ini

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

  7. Klik Simpan Template
  8. Selesai. Sekarang anda tinggal mencoba kolom yang baru dibuat tersebut. Tambahkan sesuatu pada blog anda (gambar atau tulisan)

Selamat mencoba, semoga bermanfaat..!!


Tidak ada komentar:

Posting Komentar

Popular Posts

Archives

Download

 
Design by Wordpress Theme | Bloggerized by Free Blogger Templates | coupon codes