twitter
    See You (Soon)...
Text Link Ads

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



Originally wrote and posted by Wildan Arief at 01.43
Kategori :

14 komentar:

  1. Admin28 April 2009 pukul 09.56

    kga bisa bos. no 3 ga dapet

    BalasHapus
  2. hypocrite28 April 2009 pukul 09.58

    ada cara lain ga ?

    BalasHapus
  3. Wildan Arief8 Mei 2009 pukul 00.16

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

    BalasHapus
  4. dunia_maya13 Mei 2009 pukul 19.39

    makasih tutorialnya mau tak coba langsung nih...

    BalasHapus
  5. hypocrite16 Mei 2009 pukul 09.59

    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. abdi6 Agustus 2009 pukul 10.17

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

    BalasHapus
  7. Cerita Hari Febri29 Oktober 2009 pukul 17.07

    thanks infonya bro

    BalasHapus
  8. Unknown14 Desember 2009 pukul 22.19

    mokosiiiih ya bro'''

    BalasHapus
  9. Age Putra Petir27 Desember 2009 pukul 04.49

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

    BalasHapus
  10. Pulsa Termurah20 Januari 2010 pukul 08.48

    tak cobane sik mas,..

    BalasHapus
  11. aeL21 Januari 2010 pukul 03.39

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

    BalasHapus
  12. h3ndr421 Desember 2010 pukul 07.20

    tq sob jangan lupa berkunjung di blog aq ya

    http://softwereunik.blogspot.com/

    BalasHapus
  13. Bagus Prakoso9 Februari 2011 pukul 06.47

    Ane coba dulu gan..
    nice share..

    BalasHapus
  14. belajar29 Oktober 2011 pukul 01.15

    wah ,makasi banget atas tipsnya

    BalasHapus

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

So write your comment, please... :)

Langganan: Posting Komentar (Atom)