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:

mayaozk said...

waaah menarik bgt... cb ach...

Ir. hydir said...

memang menarik kalau ada footer 3 kolum :)

Anonymous said...

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

Anonymous said...

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

Marianus said...

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

Anonymous said...

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

davzindra said...

kereeen.......

Anonymous said...

wah..wajib d coba nich sob..

Anonymous said...

keren neh . bisa dicoba .

Anonymous said...

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

Anonymous said...

weks bisa buat coba2 nguprek css template q...

kubencisekolah said...

silahkan bro baca2..dan beri komentar..hehe

Anonymous said...

Praktekkin ah..:)

Anonymous said...

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

Anonymous said...

nice tips

Unknown said...

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

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

Bang Ancis 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.

Anonymous said...

Nonton Bokeps Terbaru Jav 69

Nonton Bokeps Anak Di Bawah Umur

Nonton Bokeps Indonesia Artis

Nonton Bokeps Pecah Perawan

Cewek SMA DiSodokMemek Nya Berdarah

Nonton Bokeps Korea Terbaru

Nonton Bokeps Anak-anak Belum Berjembut

Royalflush88 Agen Poker Terbaik


Agen Poker Royalflush88 Daftar Disini

Agen Bola Online No 1 Terbaik
Bokeps Orang Rekaman Pribadi

Film Bokeps Ngintip Orang

Nonton Bokeps Terekam Cctv

Nonton Bokeps Pelajar

Bokeps Hentai

Nonton Bokeps Janda STW

Agen Poker Online No 1

Nonton Bokeps Artis Vietnam


Agen Poker Royalflush88 Daftar Disini

Agen Bola Online No 1 Terbaik

Post a Comment

Pengikut

NeoComps
Blog