home
Kamis, 14 Februari 2013
Trik ini dikhususkan bagi blog yang telah menambah tiga kolom pada bagian footer.Pada dasarnya tampilan tiga kolom pada bagian footer, kurang menarik jika tidak ditambah beberapa kode untuk mengubah tampilannya agar lebih menarik.
Bagi anda yang belum menambahkan tiga kolom pada bagian footer, silahkan anda kunjungi " MENGUBAH BAGIAN FOOTER MENJADI 3 KOLOM "
Untuk yang sudah menambahkan, dan ingin tampilannya lebih baik, ikuti tips dibawah ini.
- Masuk ke Blogger.
- Pilih Rancangan bagian Edit HTML.
- Kasih tanda contreng pada Expland TemplateWidget.
- Cari
kode untuk penambahan tiga kolom bagian footer yang telah diterapkan
pada template anda. Kode yang digunakan pada Tutorial EPG Studio adalah
seperti 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> - Tambahkan beberapa kode sehingga tampilannya seperti ini :
<div id='footer-column-container'>
<div id='footer2' style='background :black; border:2px solid white; width: 29%; float: left; margin-left:12px; margin-right:17px; text-align: left; padding:0px 10px 0px 10px'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='background :black; border:2px solid white; width: 29%; float: left; margin-left:12px; margin-right:17px; text-align: left; padding:0px 10px 0px 10px'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='background :black; border:2px solid white; width: 29%; float: left; margin-left:12px; margin-right:17px; text-align: left; padding:0px 10px 0px 10px'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/>
</div>
</div>
Keterangan :background :black;= menunjukkan latar belakang berwarna hitam. Ganti dengan warna kesukaan anda.border:2px solid white;= menunjukkan garis selebar 2px dengan warna putih. Ganti dengan ukuran dan warna kesukaan anda.width: 29%= lebar dari kolom. Ketiga kolom dibedakan ukurannya tapi jumlahnya jangan 100% karena diambil untuk margin dan lebar bordermargin-right:17px= merupakan jarak antar kolom pada bagian kanan.padding:0px 10px 0px 10px= merupakan jarak tulisan agar tidak berbenturan dengan garis.- Klik tombol Simpan Templatete
- Jika hasil dari tiga kolom tersebut belum memuaskan (salah satunya berada dibagian bawah). Anda harus mengedit kembali dengan mengubah persen dari width-nya menjadi lebih kecil.
LANGKAH-LANGKAH MODIFIKASI JUDUL PADA TIGA KOLOM FOOTER.
- Masih pada Rancangan bagian Edit HTML
- Cari kode seperti ini :
#footer {
width:1100px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
} - Tambahkan kode css dibawah ini dibawah kode tadi
#footer2 h2 {
font-size:100%;
color:#ffffff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
border: 3px solid #000033;
padding :5px 0 5px 0;
background:#4D0000 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
}
#footer3 h2 {
font-size:100%;
color:#ffffff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
border: 3px solid #000033;
padding :5px 0 5px 0;
background:#4D0000 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
}
#footer4 h2 {
font-size:100%;
color:#ffffff;
font-weight:bold;
text-transform:uppercase;
text-align:center;
border: 3px solid #000033;
padding :5px 0 5px 0;
background:#4D0000 url(http://img651.imageshack.us/img651/3007/ballb.gif)no-repeat center left;
} - Ubahlah kode-kode diatas sesuai dengan keinginan anda.
- Setelah selesai, klik tombol Simpan Template.
- Lihat perubahan pada bagian footer blog anda.
- Trik ini merupakan kode footer yang digunakan EPG Studio.
Read more: http://epg-studio.blogspot.com/2011/02/modifikasi-bagian-footer-tiga-kolom.html#ixzz2KuKpUCGT
Home
