Dapatkan Update Terbaru Dari Blog NeoComps Langsung ke Email Sobat!

Bikin Footer 3 Kolom

Pingin punya footer 3 kolom kaya blog kami sob, caranya gampang sob hanya dibutuhkan beberapa langkah saja.

Caranya seperti di bawah sobat:

Back up template blog sobat yang sudah ada!
Ini penting sobat, sebelum membuat perubahan ke template blog sobat, lebih baik melakukan back up template terlebih dahulu. Jadi apabila sobat membuat kesalahan, atau memutuskan tidak menyukai tampilan baru, sobat dapat dengan mudah kembali ke desain yang lama.


Kembali ke atas template sobat yang sudah ada, klik menu Template > Edit HTML di Dashboard Blogger sobat , dan klik "Download Full Template" link di dekat bagian atas halaman.

Menambahkan kode di bawah ke bagian footer.
Menuju ke Template > Edit HTML di dashboard Blogger sobat, dan jangan mencentang tanda "expand template widget".

Sekarang sobat cari kode d bawah:

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

Sobat harus merubah kode yang berwarna merah dengan kode berikut:

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

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

kode yang berwarna merah bisa sobat ganti sesuai selera.

Menambahkan kode css
Masih dalam edit HTML, masukkan kode berikut di atas kode </b:skin>

#footer-column-container {
clear:both;
}

.footer-column {
padding: 10px;
}

Langkah terakhir, silahkan sobat klik Save. Nah sekarang sobat sudah punya footer 3 kolom.

Semoga Bermanfaat.

Cetak Halaman Ini

24 komentar:

Maya O.Z.K said...

waaah menarik bgt... cb ach...

Ir. hydir said...

memang menarik kalau ada footer 3 kolum :)

surfing info said...

Di simpan ah script nya, ijin yah mas .. nanti² kepake nih

infopemula said...

info-nya menarik mas, tapi kok ga ada buat WP-nya..? :D

Marianus said...

Wah bagus infonya... buat belajar sekalian mas... thanks..

arvernester said...

kalo bikin kayak gitu di themes-nya CMS Drupal gimana yah?
standar banget neh templatesnya punyaku

davzbagasem said...

kereeen.......

Neo Download said...

wah..wajib d coba nich sob..

ini dan itu said...

keren neh . bisa dicoba .

Mampir Ngombe said...

Gud info fren...thenkyu.....

wh said...

weks bisa buat coba2 nguprek css template q...

kubencisekolah said...

silahkan bro baca2..dan beri komentar..hehe

che_3z said...

Praktekkin ah..:)

egah said...

tipsnya oke2 bos...minta ijin buat ngopi ya..:)

Rantaro said...

nice tips

j rockstar said...

oke sob..
slam knal juga ea
mari berkauand
hehe..

Rendy BlogHeboh said...

Postingnya menarik baget ni, saya suka banget..
saya yajin pasti bermanfaat.
Salam kenal ya.
Silahkan berkunjung ke BLOG HEBOH dan kirim komentar untuk mendapatkan backlink GRATIS karena BLOG HEBOH menggunakan sistem DOFOLLOW alias KASIH COMMENT = TUKERAN LINK. hehehe..

Oh iyah satu lagi gabung jadi pengikut saya yah..
Di tunggu yah kedatangannya,.

http://blogheboh.blogspot.com

Ficky Fauzie said...

mas kode id footer nya beda ... ga ada di template saya. adanya div id footer. saya bingung gmn neh....

http://fickyfauzie.blogspot.com

NeoComps said...

#Dear All : thx buat commentnya..n buat Ficky Fauzie tiap template mempunyai kode yg beda..tp pada intinya tetap sama..silahkan di coba di bagian div id footer..ada baiknya melakukan backup template dulu..

Novita said...

makasih bangett, trik dan tip dari anda membuat saya bertambah ilmu dan lebih bisa berkarya dengan web/blog saya, semoga anda mendapatkan hikmah dari yang mahakuasa dan dimudahkan rezeki "amin". salam buat teman2 semua..

criz said...

steees...tukeran link y:)]

infotier24 said...

wah...



tips nya keren..







makasih ya,..

Ancis F Ama said...

Alow bro........... pusing banget ya ternyata....
bisa ga bantuin aku tips2nya, soalnya aku mo tambah elemen di footer tp ga tau caranya..... templateku dari:
Blogger Template Style
Name: Blogger Buster 2.0
Designer: Amanda
URL: www.bloggerbuster.com
Date: 26 Sept 2007
bisa ga ya ditambah? Help me Please Bro....
ancispengelana.blogspot.com
aku pasang bannernya bro

imtikhan said...

makasih sob infonya sangat bermanfaat
bisa langsung coba
salam blogger.

Post a Comment

Pengikut

NeoComps
Blog