Cara Menambah Dan Membagi Dua Kolom Footer
Oleh
Dalam postingan sebelumnya saya pernah menulis tentang " membagi dua kolom sidebar " dan " membagi dua kolom header " . Nah, pada postingan atau tulisan kali ini saya ingin menambahkan dua buah kolom di bawah kolom footer ( sebenarnya mau menambah/membuat 3, 4, 5 kolom footer jg bisa, disesuaikan dengan kebutuhan saja tentunya ). seperi biasa, yang pertama saya cari adalah kode css untuk kolom yang ingin saya rubah . Karena yang sekarang ingin saya rubah adalah kolom bagian footer, berarti kode yang saya cari juga tentu kode css untuk bagian footer .
Kode untuk bagian footer adalah kode seperti dibawah ini, seperti biasanya, kode yang ini juga adalah kode kolom footer bawaan dari template Minima . Sebagai catatan kode ini lebarnya telah saya rubah, seperti yang pernah saya tulis disini " Menambah Lebar Kolom Footer " . Kodenya seperti berikut :
/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
text-transform:uppercase;
letter-spacing:.1em;
text-align: center;
}
Untuk membuat 2 kolom footer tambahan, tentunya harus membuat juga kode untuk kedua kolom footer tersebut. Pertama saya buat dulu kode css untuk kedua kolom footer tambahan , nyimpannya persis dibawah kode css kolom footer yang pertama . Jadi nantinya kode css kolom footer keseluruhannya seperti ini :
/* Footer
----------------------------------------------- */
#footer {
width:950px;
clear:both;
margin:0 auto;
padding-top:15px;
line-height: 1.6em;
letter-spacing:.1em;
text-align: center;
}
#footer-wrapper {
margin : auto;
padding : 5px 0 0 0;
width : 950px;
background : #555555;
}
#footerbot-wrapper{
width:48%;
color : #eee;
float : left;
margin : 0 5px auto;
padding-bottom : 20px;
text-align : justify;
font-size : 100%;
line-height : 1.6em;
overflow : hidden;
}
.footerbot h2 {
margin : 0 0 10px 0;
padding : 3px 0 3px 0;
text-align : left;
text-transform:uppercase;
color : #001f5b;
font-size : 18px;
font-family : nyala, Arial, verdana, trebuchet ms, times new roman;
border-bottom : 1px solid #b7b7b7;
}
.footerbot a, .footerbot a:visited {
color : #fff;
text-decoration : none;
}
.footerbot a:hover {
text-decoration : underline;
color : #001f5b;
}
.footerbot {
margin : 0;
padding : 0;
}
.footerbot .widget {
margin : 0;
padding : 0 15px;
}
.footerbot ul {
margin : 0 ;
padding : 0 ;
list-style-type : none;
}
.footerbot li {
margin : 0 0 2px 0;
padding : 0 0 1px 0;
border-bottom : 1px solid #959595;
text-indent : 10px;
}
Setelah kode css yang diatas selesai di buat, tinggal membuat kode id pemanggilan yang terdapat dalam html . Cari dulu kode id footer yang ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Setelah ketemu kode diatas, sekarang baru buat id pemanggilan untuk kedua kolom footer yang baru . Yang harus diperhatikan disini adalah cara menempatkan kode id yang baru ini, karena saya ingin menempatkan kedua kolom footer ini nantinya berada di dalam kerangka id footer dan id footer-wrapper . Coba perhatikan kode id keseluruhan untuk kolom footer di bawah ini :
<div id='footer'>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</b:section>
<div id='footerbot-wrapper'>
<b:section class='footerbot' id='footerbot1' preferred='yes'>
</b:section>
</div>
<div id='footerbot-wrapper'>
<b:section class='footerbot' id='footerbot2' preferred='yes'>
</b:section>
</div>
<div style='clear: both;'/>
</div>
</div>
Cara penempatannya saya warnai dengan warna yang berbeda supaya dimengerti dan tidak membuat saya bingung nantinya bila ingin merubah lagi.
Setelah semuanya selesai , jangan lupa klik Simpan Template , supaya proses perubahan disimpan dan di proses hasilnya oleh mesin blogger .
+
Ada 0 komentar Untuk: Cara Menambah Dan Membagi Dua Kolom Footer
Posting Komentar Untuk Artikel Ini :