Dapatkan tips dan trik terbaru langsung dari email anda sekarang!Cara pendaftaran :

1.Silahkan klik link diatas.
2.Lalu anda masukkan email anda pada kolom yang disediakan.
3.Kemudian cek email anda,lalu anda klik link aktivasi di dalam inbox anda.

Proses subscription selsai!

09 Januari 2009

Menambah 3 elemen halaman pada footer ala wordpress

tips dan trik bloggerHampir kebanyakan themes dari wordpress menyediakan elemen halaman baru pada bagian footer nya.Dan itu sangat berguna sekali untuk menghemat space dari halaman blog kita agar tidak terlihat sumpek.

Jika anda melihat blog ini,awalnya tidak memiliki elemen pada bagian footer,tapi dengan sedikit penambahan kode html,maka akhirnya elemen halaman pun bisa di tambah pada bagian footernya.

Jika template yang anda gunakan tidak ada elemen pada bagian footer,dan anda ingin membuat nya,begini cara nya:

1. Cari kode di bawah ini :

<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
Untuk kode <b:section class='footer' id='footer'/> kadang ada template yang kode nya agak berbeda,tapi paling beda dikit.,ada yang pakai DIV juga.Cari aja yang bentuk nya kayak gitu ya.

2. Setelah ketemu,anda GANTI KODE YANG BERWARNA MERAH dengan kode di bawah ini :

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


3. Setelah itu,anda cari kode </b:skin> pasang kode di bawah ini DIATAS kode </b:skin>

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

.footer-column {
padding: 10px;
}
4. Selesai...

Pada poin no.2,ada kode yang saya beritanda warna biru,itu adalah warna dari border.Anda bisa merubah sesuai dengan warna yang anda inginkan.Bingung kode warnanya? Lihat kode-kode warna disini.

Selamat mencoba...

Artikel ini saya adopsi dari blogger luar negeri bernama Amanda,salah seorang expert blogger dari Inggris.Atikel nya pun berbahasa inggris.Nah sekarang anda tidak perlu repot-repot lagi,sudah saya translate disini. :)

Referensi produk bisnis online untuk anda:

1.Dapatkan buku panduan bisnis online DISINI

2.Program baru bisnis online,sistem sederhana,lihat DISINI

Baca juga tips dan trik yang ini :



19 Yang sudah berkomentar:

Anonim mengatakan...

Wah Mantap juga Bro

thanks ya

Salam

Togu Siregar mengatakan...

@Distara : sama-sama :)

Kian Coi mengatakan...

makasih banget mas buat trik dan tipsnya...jujur saya merasa terbantu.....

Anonim mengatakan...

info yg menarik, tapi sayang saya sekarang udah pake wordpress

Togu Siregar mengatakan...

@D'Auclis : sama-sama ;)
@Pakdejack : ya udah gpp pak :)

Ficky Fauzie mengatakan...

Your template could not be parsed as it is not well-formed. Please make sure that all XML elements are closed properly.
XML error message: The element type "div" must be terminated by the matching end-tag "
msh ga bisa mas... kesalahannya dmn yahhh? please help me!

Togu Siregar mengatakan...

@Ficky: itu berarti ada kode yang kurang,atau kode tidak sempurna

Saung Link mengatakan...

Aku dah coba pasang.. tapi kok tampilannya kok gak pas yah.. apanya yang kurang tolongin dong...

Togu Siregar mengatakan...

@saung: untuk merubah letaknya ada di width % nya

kharis mengatakan...

mau coba dulu ahh....mg bisa bkerja dengan baik. Tapi sebelumnya saya ucapkan trimakasih dulu buat yang sudah sharing.

BundaAniend mengatakan...

klo yang ini, saya cukup ngerti tapi klo utk membentuk posting dalam bentuk table2 gmana sob??
linkback nya di tunggu, thx

Sharing Knowledge mengatakan...

Sip
Langsung praktek nih sob
tengkyu yah

iyoy mengatakan...

Wah canggih, langsung jalan kang...
bisa di lihat koq d blog nya saya...
Mkasih bgt...

Togu Siregar mengatakan...

@iyoi,sharing : sama-sama sob!

dunia_maya mengatakan...

manteb, udah tak pasang cuman belon tak kasih widget, but so teng yu ta bang togu!

genial mengatakan...

senada dengan bro 'Ficky Fauzie'...
masalahnya adalah... 'kode yang kurang,atau kode tidak sempurna' kodenya sapa?!??! kode template asal atau kode tambahannya??!?! soalnya sebelum ditambah, gag ada mslh apa2... :(
terimakasih atas pencerahannya :)

Togu Siregar mengatakan...

@genial: itu kurang kode penutup nya.Coba diulangi lagi cara nya

alkirmany mengatakan...

Terima kasih mas.. atas tipsnya..

Diary Osi mengatakan...

gak cocok ternyata buat WP...ada solusi gak, yg pas buat WP saya..terima kasih

Posting Komentar

Silahkan berkomentar,tapi jangan spam ya!

Twitter Update

Arsip Blog

Recent Visitor

  ©

  

Who am i ?

1.Saya hanyalah seorang newbie.
2.Tiap hari kerjanya mencari sesuap nasi lewat internet.
3.Orang yang sangat mencintai anak dan istri nya :).

Ordinary people lah pokoknya!

Oia..jangan lupa kasih komentar di artikel saya ya!

Thanks!