Home » , » MEMBUAT TIGA KOLOM DI ATAS FOOTER

MEMBUAT TIGA KOLOM DI ATAS FOOTER

Sekarang kita akan membuat dua / tiga kolom di atas footer yaitu bagian paling bawah body blog.Kolom ini tidak kalah pentingnya dibanding kolom yang berada di atas postingan maupun sidebar.
Kebanyakan kolom di atas footer diisi dengan related post,related comment,daftar link atau lainnya.

Dari pada bertele-tele langsung aja kita menuju TKP ( niru Opera Van Java ).

1.Masuk Blogger.
2.Klik Tata Letak.
3.Klik submenu Edit HTML.
4.Jangan lupa Download Template Lengkap
5.Letakkan kode berikut di atas kode ]]></b:skin>



/* bottom
----------------------------------------------- */
#bottom {
width:860px;
clear:both;
margin:0 auto;
float:left;
padding:10px 0;
}
#bottom a:link {
color:#006699;
text-decoration:none;
}
#bottom a:hover {
color:#c06000;
text-decoration:underline;
}
#bottom a:visited {
color:#045FB4;
text-decoration:none;
}
#bottom h2 {
padding:20px 0 2px 0;
margin:0 0 10px 0;
font-size:11px;
font-weight:bold;
line-height:1.4em;
text-transform:uppercase;
}
#bottom ul {
padding:0;
margin:0;
color:#333;
}
#bottom ul li {
list-style-type:none;
padding-left:17px;
margin-top:2px;
}
#left-bottom {
width:261px;
float:left;
padding-left:5px;
}
#center-bottom {
width:280px;
float:left;
padding:0 20px 0 20px;
}
#right-bottom {
width:261px;
float:left;
padding-right:7px;
}
Sesuaikan angka merah dengan lebar template milik anda
7.Cari kode :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
 </div>
8.Letakkan kode berikut di atas kode 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>
Sehingga kode menjadi :

<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>
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
9.Simpan Perubahan

Silahkan lihat hasilnya,jika belum berhasil coba ulangi langkah-langkahnya dari awal atau kirimkan pertanyaan dalam kotak komentar,secepatnya akan saya balas.
Bagikan artikel via :

0 komentar:

Posting Komentar

 
Support : Your Link | Your Link | Your Link
Copyright © 2013. PRAPATAN KERTEK - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger