Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom



Do you Like this story..?

Get Free Email Updates Daily!

Follow us!

Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom | Bagi anda yang ingin menambah kolom pada halaman utama blog kesayangan anda karena kurangnya tempat untuk meletakkan beberapa widget yang akan anda pasang, pada kesempatan ini saya akan membahas tutorial tersebut. Pada posting sebelumnya saya juga pernah membahas cara membuat 3 kolom di bawah header, mungkin anda juga ingin membuatnya, silahkan ditinjau juga ya.

Cara membuat footer atau menambah footer disini akan saya bagi menjadi 3 bagian, anda nantinya tinggal memilih tutorial mana yang akan anda butuhkan untuk diterapkan pada blog anda, baik Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom, biasanya para blogger menamakan dengan footer multi kolom.

Berikut langkah-langkah cara Menambah Footer Multi Kolom :

1. Login ke Blogger
2. Pilih Rancangan
3. Edit HTML
4. Back-up dulu template anda dengan klik pada Download Full Template untuk menjaga-jaga apabila terjadi kesalahan, anda bisa mengembalikan template anda ke kondisi semula.
5. Kemudian cari kode ]]></b:skin>
6. Kalau sudah, tambahkan kode di bawah ini di atas kode ]]></b:skin>

#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}

7. Langkah selanjutnya anda cari kode seperti di bawah ini :

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

Atau kalau tidak ada, cari kode seperti berikut :

<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>

8. Tambahkan kode berikut dibawah kode <b:section class='footer' id='footer' showaddelement='yes'/>  
atau
<b:section class='footer' id='footer' />

Penting :
Jika anda tidak menemukan kode <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan saja kode berikut dibawah <div id='footer'>


1. Cara membuat footer 2 kolom, kodenya seperti berikut ini :

<div id='footer-column-divide'>


<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div style='clear:both;'/>
</div>

Contoh menambah footer 2 kolom seperti di bawah ini :

Menambah Footer 2 Kolom


2. Cara membuat footer 3 kolom, kodenya seperti berikut ini :

<div id='footer-column-divide'>


<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>

Contoh menambah footer 3 kolom seperti di bawah ini :

Menambah Footer 3 Kolom


3. Cara membuat footer 4 kolom, kodenya seperti berikut ini :

<div id='footer-column-divide'>


<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>


<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>


<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>


<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>


<div style='clear:both;'/>
</div>

Contoh menambah footer 4 kolom seperti di bawah ini :

Menambah Footer 4 Kolom


9. Kalau sudah, Save Template dan lihat hasilnya

Sampai disini dulu pembahasan ini karena saya rasa pembahasan mengenai Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom  atau Cara Membuat Footer Multi Kolom ini sudah selesai, maka saya berharap anda cukup paham, selamat mencoba dan semoga berhasil, wassalam.


Comments
1 Comments

Responses

1 Respones to "Cara Menambah Footer Menjadi 2 Kolom, 3 Kolom, 4 Kolom"

Rudy Hartono said...

infonya sangat tepat, salam kenal


March 13, 2012 at 12:39 AM

Post a Comment

Peraturan Berkomentar di Kolom Komentar It Cyber Syndicate :
» Jangan Menggunakan bahasa yang tidak sopan (Politik, Sara, Pornografi, Menyinggung)
» Tidak Di Ijinkan menampilkan Link(URL)
» Bentuk Komentar Tidak Berbau Keagamaan
» Dilarang Promosi Saat Berkomentar

Jika melanggar kriteria diatas, maka komentar akan dihapus

Terima kasih sudah berkunjung.

 
LINK BANNER :
  • Tips, Triks, Cheat, Software,
  • Binus Hacker - Independent Hacking Community
  • Blog yang ingin berbagi tips SEO, download ringtone, ebook dan software gratis, puisi, berbagi tips dan trik blogger, belajar bisnis online, belajar forex gratis
  • Blog Adexme | 'free software','tutorial blog','template blog' dll
  • Berbagi Tips dan Trik Seputar Komputer dan Internet
  • mahir blogging
  • Bermanfaat
  • Photobucket
  • jagoBlog.com
  • News Entertainment Tips and Trick | Blog | SEO | Software | Mobile | Games | Others.
  • Arimurti untuk Indonesia
  • Share-cara
  • Share shoftware,Tutor,Facebook,Blog,Tips Trick

Statistik

Return to top of page Copyright © 2010 | IT Cyber Syndicate