Membuat Tiga Kolom diatas Footer

Diposting olehviky on Sabtu, 16 Juli 2011


Sharing Kali ini saya akan berbagi tentang cara membuat tiga kolom diatas footer, mungkin banyak diantara kita yang notabene adalah newbie atau blogger pemula yang masih bingung untuk menambah elemen di blog kita.

Ga ada salahnya kamu mencoba trick blog ini dengan memanfaatkan space diatas footer, seperti yang terdapat di Blog Viky ini..tertarik untuk membuatnya ? begini hih caranya  :

1. login ke blogger
2. pilih edit tamplate/tataletak
3. lalu pilih Edit HTML
5.  Centang kotak kecil di samping tulisan expand widget template
6.  Cari kode ]]></b:skin> :
7. copy kode di bawah ini dan simpan di atas kode ]]></b:skin> :


/* bottom
---------------------------- */ 
#bottom {
width: 660px;
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;
}



8. 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>

9. 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'/>
</div>


10. Jangan lupa akhiri dengan mengklik tombol Simpan Template.



Setelah itu kita masuk langkah  ke 2 :


1. Klik menu Elemen Halaman.


2. Lihat apakah kolom yang tadi dibuat sudah tampak atau belum? jika sudah, klik link Tambah sebuah Elemen Halaman, klik tombol TAMBAHKAN KE BLOG. terserah anda mau nambah apa. setelah beres klik tombol SIMPAN
selamat mencoba, semoga berhasil

{ 1 komentar.. read them below or add one }

Muhammad Rasya mengatakan...

makasih lo gan,, udh saya upply di blog online shop saya,, sebelumnya ngk punya,, sekarang udah punya,, visit back ya gan,,,
Untung Shop | Toko Online Murah
Iklan Untung | Iklan Baris Gratis
RasyaShare | Tempat Berbagi Segalanya

Posting Komentar

 

Blog Archive