Friday, October 17, 2008

Membuat Footer Menjadi 3 Kolom

sudarma

Setelah Pencarian yang melelahkan, pencarian yang menguras keringat darah [hiperbola banget,wkwkwk], Ahirnya saya[sudarma] bisa menemukan tutorial ini [Membuat Footer Menjadi 3 Kolom]. Dari manakah saya mendapatkan ilmu yang sangat berharga ini?


Ilmu untuk Membuat Footer Menjadi 3 Kolom saya dapatkan dari web ini. nama webnya analogikan, mantap bangetkan. :). beliau yang punya blog ini menerangkan dengan sangat singkat dan jelas. Saya sekali praktek langsung berhasil sobat. Oke cukup sudah mengagumi, sekarang saya lanjutkan ke tujuan awal, yakni merepost ulang dengan bahasa sendiri.wkwwkwk [lagi-lagi repost]
Sobat semua pasti tau apa itu footer yang terdiri dari 3 kolom, kalau belum tau bisa di lihat di bawah blog ini sobat. Blog ini footernya ada 3 kan? Bisa liat?? Cara buatnya simple aja sobat.

Pertama : Login ke blogger, sesuai dengan username dan pasword [kalau gak sesuaikan gak bisa masuk,wkwkw], habis tu masuk ke tata letak[layout], dan pilih edit html. Nah jangan di centang “Expan widget templates”.

Kedua : cari kode yang merah di bawah ini sobat. Biar gampang tekan aja [ctrl] + [f]. nah pastekan kode yang berwarna merah.





<div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>



gimana sobat, ketemu?

nah kalo udah ketemu, delete kode yang berwarna merah, dan ganti dengan kode di bawah:





<div id='footer-column-container'>

<div id='footer2' style='width: 30%; 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: 40%; 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: 30%; 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>


sudah sobat? kalau udah copy kode di bawah dan taruh sebelum kode </b:skin>.






#footer-column-container {

clear:both;

}



.footer-column {

padding: 10px;

}






Trus save sobat. oke selamat mencoba, semoga berhasil :).










ads by SengAdeApe | This site only for 17+




Posting yang berhubungan



9 komentar:

Noise-X said...

thanks info yang berharga ini...:-)

sudarma said...

noise-X @ tahnk banget dah berkunjung sobat, kebetulan blog lagi sepi. Ya sama2. Emang infonya berharga sobat,he3...

candra said...

thank, mantap abis

idotkontji said...

semua blog seperti ini meyarankannya kenpa nggak bisa di blog saya ya,,,

sudarma said...

candra @ thank dah berkunjung my friend..

idotkontji @ di beberapa blog memang gak bisa, saya aja susah nerapinnya bos...tapi semangat ya

Yhoyho said...

Makasih mas.. Infonya sangat membantu banget buat pemula ky aku.
Mau tanya neh mas...
Nah trus cara postingnya gimana?
Maksudnya biar tulisan2 itu bisa di klik dan buka halaman baru..??
Maaf..Mas aku bnr2 masih baru jadi gak reti tentang html,script atau apa lah itu namanya hehehe..
Mohon bimbingannya ya mas..!

Armand said...

Thanks sob!
Dari semalam gw cari cara buat footer 3 kolom akhirnya ketemu juga!
Hehe..
Sukses selalu bos..
Numpang naro link ya sob!
technology

Dek Suarta said...

koq saya nda berhasil bos?
dia minta "div"nya ditutup.
gimana tuh?
salam

deksuarta
http://yuk-belajar.blogspot.com

cahaya as-salam said...

alhamdulillah aku dah nyoba dan berhasil buat footer tiga kolom. oiya..mas dikasih tahu cara membuat sidebar dalam kotak-kotak terpisah di template Rounders 3. kalo yang di tampilkan di blog mas cara membuat sidebar dalam kotak-kotak terpisah di template mini. aku dah nyoba di template Rounders 3 tapi ga berhasil. apa caranya berda ya mas. tolong dong dikasih tahuuuuu.

Post a Comment

Silahkan tinggalkan komentar anda untuk artikel ini :)