twitter
    See You (Soon)...

2009/02/02

Membagi Footer Menjadi 3 Kolom


Bila Anda mendapati template yang hanya ada dua kolom seperti pada template saya ini, pasti menemui banyak kendala untuk menampung widget-widget yang ingin Anda tampilkan dalam blog. Nah barangkali tutorial berikut dapat dijadikan alternatif bagi Anda. Karena dengan menggunakan kolom yang ada di footer, selain menghemat tempat juga Anda dapat menyisipkan lebih banyak widget yang penting bagi blog Anda.

Berikut langkah-langkahnya…


1. Klik pada Layout (Tata Letak)


2. Klik Edit HTML


3. Kemudian cari kode di bawah ini, sebagai catatan, jika Anda tidak menemui kode berikut, maka usahakan untuk mencari kode yang semirip mungkin.







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



Ada juga kode yang seperti ini :






<div id='footer-wrap1'><div id='footer-wrap2'>
<b:section class='footer' id='footer'>
<b:widget id='Text1' locked='false' title='' type='Text'/>
</b:section>

</div></div>



4. Gantikan kode di atas yang berwarna biru 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><!--kolom pertama-->

<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><!--kolom kedua-->

<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><!--kolom ketiga-->

<div style='clear:both;'/>
<p>
<hr align='center' color='#5d5d54' width='90%'/></p><--garis horizontal-->

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



Sekedar catatan, Anda dapat membuat lebar kolom dan menambah kolom sesuai dengan yang Anda inginkan dengan mengubah prosentase kode yang berwarna merah di atas sesuai keinginan Anda, asalkan keseluruhannya berjumlah 100%.


5. Kemudian letakkan kode berikut ini tepat di atas kode ]]></b:skin>






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

.footer-column {
padding: 10px;
}




6. Kemudian klik pada Simpan Template


Sekarang untuk membuktikan keberhasilan Anda dapat dilakukan dengan klik Elemen Halaman, jika pada footer sudah tampak 3 kolom berarti Anda telah berhasil.

Semoga bermanfaat!

Jangan lupa berkomentar ya.. Terimakasih!



Dapatkan update hacking tutorial, tips dan trik menarik seputar teknologi, download full software, belajar bisnis internet, dan masih banyak lagi langsung ke email Anda sekarang juga!


Related Post



16 komentar:

  1. Sip lah...ak boleh pinjem idenya buat upgrade artikelku ga?
    Tenang, entar kasi link km bos.

    BalasHapus
  2. kga bisa bos. no 3 ga dapet

    BalasHapus
  3. @ hypocrite : mgkn html nya di template anda lain mas.. kalo gitu emng agak susah nyarinya.. tp coba cari aja yg paling mirip..

    BalasHapus
  4. makasih tutorialnya mau tak coba langsung nih...

    BalasHapus
  5. Template Anda tidak dapat diparse karena tidak well-formed. Harap pastikan bahwa semua elemen XML ditutup dengan benar.
    Pesan error XML: The content of elements must consist of well-formed character data or markup.

    muncul error kek gtu tu.. -_-

    BalasHapus
  6. sip lah...coba liat blog ku sekarang udah punya footer 3 kolom thx ya...

    BalasHapus
  7. meletakan yg ini dimana ya kok aku bingung (kode ]]>)

    BalasHapus
  8. seperti kata hypocryte punyaku gak bisa dibuat dengan cara mas. gimana??

    BalasHapus
  9. tq sob jangan lupa berkunjung di blog aq ya

    http://softwereunik.blogspot.com/

    BalasHapus
  10. Ane coba dulu gan..
    nice share..

    BalasHapus
  11. wah ,makasi banget atas tipsnya

    BalasHapus

Every of your opinion would be very valuable for me...

So write your comment, please... :)