Sudah berlangganan artikel blog ini via RSS Feed?

Cara Membuat Footer 3 Kolom

Banyak tugas jadi blog ku nganggur 2 hari.... nich, tapi tetep posting lagi.. :). kali ini kita akan membahas masalah cara membuat footer 3 kolom yang dimiliki oleh wordpress. Nah terus apa hubungannya sama blogger?, pastinya ada, karna kita akan membuat footer 3 kolom ini pada blogger.com. Agar lebih jelasnya anda bisa langsung lihat blog saya paling bawah sendiri. Supaya tidak terjadi kesalahan dalam membuat footer 3 kolom, sebaiknya anda backup terlebih dahulu template anda, untuk mengatisipasi kekeliruan saat pengeditan nanti.

Langkah - langkah nya sebagai berikut :

1. langkah pertama klik centang ekspand widget (agar semua widget yang tersembunyi muncul).
2. Cari code ]]></b:skin>
3. copy code dibawah ini diatas ]]></b:skin>

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

3. Setelah itu Cari kode dibawah ini.

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

4. Setelah ketemu, copy semua kode berikut ini dibawahnya

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

5. Klik Save dan lihat hasilnya.... :)

Oya setelah saya coba - coba peletakan code kadang berbeda dengan temp yang satu dengan yang lain... tapi rata - rata berhasil.

sumber : rudee terima kasih, mungkin karna keteledoran saya.he...

Jika anda ingin merubah tampilan blog, agar lebih menarik silahkan baca :
Jika ada yang bertanya masalah cara membuat footer 3 kolom silahkan comment...
Terimakasih sudah mengunjungi blog ini... :D

Powered by  MyPagerank.Net

29 komentar:

Sintia mengatakan...

kenapa diriku masih binggung???

lina mengatakan...

mampir mas.. :)

Mang Jaya mengatakan...

Udah saya terapkan kok... Thanks ya.... Lihat design blog saya donk. Komentarin juga ya.
http://www.idonbiu.com

Rudee mengatakan...

wah.. mak nyos bang!!!

Irfan Gallery mengatakan...

bang putro,,,
salam kenal y,,, saya irfan, ne masih awan dengan dunia blog. tolong bantuin donk,,, saya liat blog nya bang putro jadi ngiri ne,, :D blog saya irfangallery.blogspot.com (masih jelek :(()

1. kalo mau nambah buat tab navigasi ex:home , about. gimana bang?

2. N komentar nya lucu2 gimana tu buat nya bang...

3. gimana cara biar kalo ada yang komentar langsung ada di bawah postingan .

tolong y...;)
moga2 blog bang putra makin sukses n jadi mesin dollar$$$$

kharis mengatakan...

Makasih mas..blog gw jadi makin canti knih.

putro mengatakan...

@ Irfan Gallery : udah ada tutornya kq coba cari- lagi :D

@ kharis : sama - sama :D

nash mengatakan...

mas met kenal...kalo maslh pengaturan ukuran pixelnya gimana?apakah disesuaikan dengan blog yang kita miliki atau copy paste saja kode di atas mentah-mentah tanpa harus di otak - atik lagi?
tanx

Saung Web mengatakan...

tips nya dicoba dulu ah..

Iklan Baris Gratis mengatakan...

tutorial yang bagus nih...

TOMATO mengatakan...

kalo template saya gak ada
<b:section class='footer' id='footer'/>
solusinya gmn ya ?

Ghustie Samosir mengatakan...

kalo mau ilangin footernya gimana yach sob?? blog saya gak pake footer :)

Regards,
Ghustie Samosir

www.hanyainfo.blogspot.com



Ada bisnis menarik nih. Program bisnis investasi BCA dengan modal cuma Rp. 10.000,-
Bisa dapetin 3 x lipat atau lebih (lumayan buat beli cendol :D)
Gabung ya di www.investasibca.com

Catatan Kecil'ku mengatakan...

mas, kalau mau bikin kolom-kolom menu gt?? gmn caranya??

blas di blogku ya!

http://ridodoank.blogspot.com

sigionline mengatakan...

mas, kalau mau bikin kolom-kolom menu gt?? gmn caranya??
blas di blogku ya!

Kumpulan Resep mengatakan...

Makasih ya tips nya
langsung praktek...
kunjungi Resep Kue Kering Sagu Keju

Blognya Arie mengatakan...

link back

percepat koneksi mengatakan...

banyak banget tutorialnya.... nice bro

Garasie mengatakan...

mas kok sulit dapat kode html di point yang ke 4??
ga dapat yang sama persis tuh??
www.garasiegarasie.blogspot.com

oiblitar mengatakan...

wah.. bisa ngk bisa tetep dicobak wae./

yang penting makasih sebelumnya ilmune..
saya cobak di WP http://blog.usaharakyat.com

lok cara kasih emoticon kayak dibawah kolom koment itu piye...??

asmanu mengatakan...

Tutorialnya ok banget nih..mohon ijin mau coba
makasih..

Jaka Zulham mengatakan...

wah, pengetahuan baru neh gan :)
salam sejahtera dari
jakazulham.blogspot.com

Game Online Anak mengatakan...

Hasil ending-nya kayak apa...msh gak mudeng neh..maklum msh newbie..

Lirik Lagu Barat mengatakan...

Akan saya coba...pasti ini bagus buat pasang adsense ya..thanks gan!!!

Anonim mengatakan...

salam kenal gaan :)
kalo ada waktu kunjung balik yaa ke sini.

AcerNoval mengatakan...

nah,, ini yg saya cari !!

kolom lyrics mengatakan...

nice infonya sob....
sangat membantu,,,,

jual karpet mengatakan...

terima aksih akan saya coba

Toko Bunga Online mengatakan...

kalau footernya ditambahin video dari youtube bagaimana mas??

Vimax Original Pembesar Mr.P Herbal mengatakan...

artikelnya sangat membantu thanks for sharing
kunjungi web kami gan => www.vimaxkapsuloriginal.com

Posting Komentar


 

My Friends Google

My Profile

cojogja Blog ini saya buat, untuk berbagi informasi kepada teman - teman, dan sebagai rangkuman untuk diri saya sendiri. ( Semoga gak bosen Dengan Blog Saya... :D )