Cara Membuat 4 Kolom di Atas Footer


Cara Membuat 4 Kolom di Atas Footer. kalau dulu saya sudah pernah menerangkan mengenai membuat 3 kolom, sekarang 4 kolom. hasil dari 4 kolom ini akan terlihat seperti pada halaman utama blog saya. silahkan lihat. kolom tersebut berada di atas credit link. atau jika malas kesana silahkan lihat screen shootnya saja.


bagaimana? kalian tertariK? Untuk membuat menjadi 4 kolom, perlu di lakukan sedikit penyesuaian, dengan manambah footer-wrapter
  • Login ke blogger
  • Pilih Rangangan
  • Pilih Edit HTML
  • Silakan copy kode di bawah ini dan simpan di atas ]]>:

/* bottom
---------------------------- */ #bottom {
width: 870px; /*sesuaikan dengan lebar blog*/
position: relative;
clear:both;
margin: 0 auto;
color:#fff;
float: left;
background:#BDBABD;
padding: 15px 0 15px 0;
}
#bottom h2 {
padding: 5px 0 2px 0;
margin: 0 0 10px 0;
color:#ff5a00;
font-size: 24px;
letter-spacing: -1px;
border-bottom: 1px solid #fff;
}
#bottom ul {
padding: 0;
margin: 0;
}
#bottom ul li {
line-height: 26px;
list-style-type: none;
border-bottom: 1px dashed #031c5d;
}
#bottom ul li a {
display: block;
padding: 0 10px;
color:#0701FD;
text-decoration: none;
}
#bottom ul li a:hover {
background: #B1ACB1;
}
#left-bottom { /* yang ini nih kode kolom kiri */
width: 205px;
float: left;
padding-left:10px;
}
#center-bottom { /* kalo yg ini kode kolom tengah */
width: 205px;
float: left;
padding-left:10px;
}
#right-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
#right-pojok-bottom { /* kalo yg ini kode kolom kanan */
width: 205px;
float: left;
padding: 0 5px 0 10px;
}
  • lihat bagian </body>  yaitu pada bagian bawah kode Template, dan cari kode yang mirip seperti ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
  • Copy paste kode berikut persis di atas kode yang atas tadi :
<div id='bottom'> <b:section class='bottom' id='left-bottom'/>
<b:section class='bottom' id='center-bottom'/>
<b:section class='bottom' id='right-bottom'/>
<b:section class='bottom' id='right-pojok-bottom'/>
</div>
  • Jangan lupa akhiri dengan mengklik tombol Simpan Template.
Mudah sekali bukan? silakan Anda modifikasi sendiri bentuknya, dan warnanya sehingga cocok dengan template blog Anda.
Dapatkan update artikel terbaru kami langsung ke email anda
pasang iklan murah