Browse » Home » » Membuat Footer Menjadi 3 Kolom

Membuat Footer Menjadi 3 Kolom

Mungkin saat ini atau sebelumnya sobat Blogger ada rasa ke inginan bagaimana cara membuat FOOTER menjadi 3 kolom, nah..., disini bisa anda lihat/dapatkan bagaimana caranya membuat FOOTER menjadi 3 kolom atau 3 bagian yaitu kolom kiri, kolom tegah, dan kolom kanan, Mari kita mulai cara membuatnya, silahkan Sobat lihat langkah-langkahnya sebagai berikut di bawah ini :
* Sign in seperti biasa di blogger dengan id milik sobat.

* Klik menu Layout.

* Klik menu Edit HTML.

* Klik tulisan Download Full Template.

* Silahkan save dulu template tersebut, ini di maksudkan untuk mengurangi resiko apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

* Beri tanda centang pada kotak di samping tulisan Expand Widget Template, sekali lagi jangan lupa beri tanda centang dulu yah, sebab kalau tidak, nanti akan tidak sesuai dengan langkah selanjutnya.

* Dan Tunggu beberapa saat ketika proses sedang berlangsung.

* Langkah yang PERTAMA copy kode CSS di bawah ini kemudian Paste di atas kode ini >>> ]]></b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

* Langkah ke DUA Silahkan cari kode script seperti di bawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>

* Dan Langkah yang ke TIGA Jika kode script di atas tadi sudah Anda ketemukan, kemudian ganti kode di atas yang saya beri warna BIRU dengan kode script di bawah ini:

<div id='footer-column-container'>
<div id='footer2' style='width: 33%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col1' preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 34%; float: left; margin:0; text-align: left;'>
<b:section class='footer-column' id='col2' preferred='yes' style='float:left;'/>
</div>
<div id='footer4' style='width: 33%; float: right; margin:0; text-align: left;'>
<b:section class='footer-column' id='col3' preferred='yes' style='float:right;'/> </div>
<div style='clear:both;'/>
<p> <hr align='center' color='#5d5d54' width='90%'/>
</p> <div id='footer-bottom' style='text-align: center; padding: 10px; text-transform: lowercase;'>
<b:section class='footer' id='col-bottom' preferred='yes'> <b:widget id='Text2' locked='false' title='' type='Text'/> </b:section>
</div> <div style='clear:both;'/>
</div>

* Lalu SAVE TEMPLATE / SIMPAN TEMPLATE.

@ Kode yang saya beri warna MERAH, Anda bisa merubahnya sesuai dengan selera, jika sobat ingin memilih bermacam-macam warna favorite silahkan lihat DISINI

* Selesai dan Selamat Mencoba.

8 Comments To Membuat Footer Menjadi 3 Kolom

Thanks tulisannya, akan dicoba kodenya.
°l||l°
cara membuat blog mengatakan pada
 
°l||l°
di coba dlu y gan,,,
°l||l°
isikepalatovan mengatakan pada
 
°l||l°
not working :D atw salah kali ya saya jalanin langkah² nya..
°l||l°
firman wibisono mengatakan pada
 
°l||l°
jalan kok.. tengkyu yah,,,,
°l||l°
sikeciltampan mengatakan pada
 
°l||l°
Q kok gak bisa yo..........?????
°l||l°
Simple, Single N' Sederhana mengatakan pada
 
°l||l°
thx gan,bermanfaat bgt infonya.. :)

kpn2 knjungi blog ane y

www.klikti.co.cc
°l||l°
Sai.. mengatakan pada
 
°l||l°
ko di tempelate saya ga ada kode yang langkah ke 2 ya?
kenapa ya??
tenpelate saya dapet dari download site laen
°l||l°
insomaniac mengatakan pada
 
°l||l°
langsung praktek....
°l||l°
mikomoki mengatakan pada
 
°l||l°

Send Your Comment Here

Pernak Pernik Blogger | Copyright 2010 | Template Design © By IMS | Powered By Blogger