Membuat 4 Kolom Di Atas Footer

Lagi musim hujan nih sob, mo kemana-mana jadi males udah jalanan becek, ga da ojekbig grin. Sambil merasakan dinginnya udara kala hujan, tak ada salahnya skoci menambah jumlah postingan yang ada di blog ini. Lebih bermanfaat ketimbang bengong, pikiran kosong, kantong bolong, kesiaaan ;D

Kembali ke topik, kali ini kita coba membuat kolom di atas footer yang bisa digunakan untuk menyimpan widget, foto pacar atau apapun yang sekiranya bisa kita simpan di elemen ini. Untuk membuatnya tidaklah begitu sulit, jika kita sudah tau caranya. Jiaaah, nenek2 mo pingsan juga tau kali mas...laughing   

Baiklah kalau begitu, berikut adalah cara membuat 4 kolom di atas footer :

1. Login ke blogger
2. Pilih Rancangan
3. Pilih Edit HTML
4. Silakan copy kode di bawah ini dan simpan di atas ]]></b:skin> :
/* bottom
---------------------------- */ #bottom {
width: 960px; /*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;
}
5. 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>
6. Copy paste kode berikut persis di atas kode yang 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>
7. Simpan Template dan lihat hasilnya.


Say thanks for: kucoba.com
Untuk berlangganan artikel, masukan email anda disini:



3 Comment :

Ngulikku mengatakan...

Tanks gan,dah kucoba jadi.....

Destur Purnama Jati mengatakan...

dicoba bro

Gus Eko mengatakan...

thanks gan infonya sangat bermanfaat,and mohon izin untuk bookmarks,
jika sudi mampir ke gubug ane.....
www.mediaonlen.blogspot.com

Posting Komentar

Bahasa dapat mencerminkan kepribadian seseorang.
Bagi yang ingin promosi web, blog dan atau mendapatkan backlink dari blog ini, telah disediakan tempat khusus. Klik DISINI

 

Info Olahraga

Info Komputer

Info Blackberry