Cara menambah tiga kolom di bagian footer

Tutorial ini saya ambil dari T4 Belajar Blogger,yang menurut saya sangat menarik.dan saya akan repost di blog ini.Simpel saja,jika melihat gambar berikut pasti langsung akan mengerti apa fungsi dari nambag 3 kolom di footer ini.Berikut gambarnya

Before:

 
After:




 

Sudah paham?jika belum,liat lagi tuh gambarnya.hehe..jika sudah,yuk kita lanjut.

Ada beberapa langkah untuk membuat tiga kolom di bagian footer ini,langkah-langkahnya sebagai berikut:

1.Login ke akun blogger anda
2.Klik Rancangan tuju ke => Edit HTML
3.Sebelumnya centang kotak expand template widget dulu ya
4. Lalu cari kode ]]></b:skin>, dan letakkan kode berikut ini di atas kode ]]></b:skin>

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

5.Lalu cari kode seperti berikut

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

6.Lalu letakkan kode berikut dibawah kode no.5 tadi

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

 Selesai.semoga berhasil

sumber:http://t4belajarblogger.blogspot.com/2009/11/cara-menambah-tiga-kolom-di-bagian.html
Share this article :

+ komentar + 15 komentar

29 April 2011 04.12

Mantap...
Kalau untuk wordpress sama kagak bro ? :D

29 April 2011 04.54

bisa langsung ane juba ni gan ..........

29 April 2011 05.45

bagus gan infonya,,,,bisa di coba juga ni

29 April 2011 07.06

Sob, mau tanya nih sob cara buat tab menu. codingnya tuh gimana,tolng dibantu ya diblog saya kan ada tab menu video, tag, blog arcive saya bingung ngasih codingnya. tanks

29 April 2011 07.41

@tipshare:oh ia sob..kebetulan blog saya yang 1 lagi,pake template kaya sobat jga.ada tab menunya gitu.itu gampang kok kalo mau diganti,tinggal ke Rancangan => trus kan ada elemen 3 baris agak pisah gitu kebawah.yang baris ke-1 itu buat tab menu pertama misal kata sobat tadi video,trus baris agak jauh yang ke2 buat tab menu tag dan yang agak jauh ke3 itu buat tab menu blog archive.ni contoh blog saya yang pake template ada tab menunya:http://adriancarclub.blogspot.com/
smoga bantu

wahh seep niy tutorial edit template-nya, kebetulan saya juga lagi pingin belajar memodifikasi template. Biasanya saya sih klu untuk ganti kolom dan editing layout lainnya langsung ke "perancang template" aja via layanan blogger template design :D Tapi tutorialmu bagus, sekalian buat belajar html..

oiya, thanks ya bro sdah mampir ke ilmu_air dan share komennya..

29 April 2011 14.36

makasi gan info.y..!!!
uda aku coba, n berhasil...
silahkan di liat hasilnya gan, klo ada yg kurang mohon bimbingan.y
---!>Newbie

30 April 2011 06.48

mantaaap gan.....

30 April 2011 07.01

nice info,,i'll try it

30 April 2011 07.06

nice tut. sob
mksi tlh brbgi :)

1 Mei 2011 19.38

makasih infonya sob,kalo di tambah terus di pasang widget apa nggak berat nanti sob.??

1 Mei 2011 20.51

nice info gan.... happy blogging...

7 Mei 2011 15.52

Info nyya bermanfaat gan patut di coba

23 Juni 2011 07.22

nanya dong gan, kan d footernya ada garis,
kok garisnya ga ditengah si gan, terlalu ke kiri, gimana cara ke tengahinnya gan?
thx
nih blog saya http://lilnope.blogspot.com/

7 Juli 2011 07.17

numpang nyimak sob :)

Posting Komentar

Silahkan beri komentar anda setelah membaca artikel diatasTerima kasih untuk tidak berkomentar yang berunsur SPAM.

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Just for Fun | Trick blogger | Dunia Internet - All Rights Reserved
Template Created by Creating Website Published by Mas Template
Proudly powered by Blogger