TERIMA KASIH ATAS KUNJUNGAN ANDA, SAYA HANYA BISA MEMBERIKAN PENYALURAN YANG SINGKAT DAN SEDERHANA, SEMOGA BERMANFAAT

http;//jimmyamba.blogspot.com/

Jumat, 09 Juli 2010

Cara 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

* Beri tanda centang pada kotak di samping tulisan Expand Widget 
  Template


* Langkah yang PERTAMA copy kode CSS di bawah ini kemudian Paste di
  atas kode  ]]></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
   Kode yang saya beri warna MERAH, Anda bisa merubahnya sesuai dengan
   selera

* Selesai dan Selamat Mencoba.

Tidak ada komentar:

Prev Prev Prev
 

Lencana Facebook

Page Group