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 :
- Cara membuat label berputar - putar
- Cara mudah membuat favicon
- Pasang kotak pencarian di blogger
- Cara menghapus angka pada label
- Pasang jam di blog
- Cara menampilkan status YM
- Cara membuat widget melayang
- Memasang emoticons di kotak komentar
- Cara membuat kontak kami
- Cara membuat iklan melayang
29 komentar:
kenapa diriku masih binggung???
mampir mas.. :)
wah.. mak nyos bang!!!
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$$$$
Makasih mas..blog gw jadi makin canti knih.
@ Irfan Gallery : udah ada tutornya kq coba cari- lagi :D
@ kharis : sama - sama :D
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
tips nya dicoba dulu ah..
tutorial yang bagus nih...
kalo template saya gak ada
<b:section class='footer' id='footer'/>
solusinya gmn ya ?
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
mas, kalau mau bikin kolom-kolom menu gt?? gmn caranya??
blas di blogku ya!
http://ridodoank.blogspot.com
mas, kalau mau bikin kolom-kolom menu gt?? gmn caranya??
blas di blogku ya!
Makasih ya tips nya
langsung praktek...
kunjungi Resep Kue Kering Sagu Keju
link back
banyak banget tutorialnya.... nice bro
mas kok sulit dapat kode html di point yang ke 4??
ga dapat yang sama persis tuh??
www.garasiegarasie.blogspot.com
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...??
Tutorialnya ok banget nih..mohon ijin mau coba
makasih..
wah, pengetahuan baru neh gan :)
salam sejahtera dari
jakazulham.blogspot.com
Hasil ending-nya kayak apa...msh gak mudeng neh..maklum msh newbie..
Akan saya coba...pasti ini bagus buat pasang adsense ya..thanks gan!!!
salam kenal gaan :)
kalo ada waktu kunjung balik yaa ke sini.
nah,, ini yg saya cari !!
nice infonya sob....
sangat membantu,,,,
terima aksih akan saya coba
kalau footernya ditambahin video dari youtube bagaimana mas??
BLOG YG SANGAT BAGUS DAN ARTIKEL YG MENARIK DAN BERMANFAAT. TERIMAKASIH
Ilmu baru mas,thanks.
Vinyl Anti Bakteri
Vinyl Rumah Sakit
LG Medistep Allroad
Jual Step Nosing
Vinyl LG Bright
Vinyl Lantai Olahraga
Posting Komentar