Cara mudah membuat 3 kolom footer | footer multy kolom

Cara mudah membuat 3 kolom footer atau footer multy kolom. Template blogspot sangat beraneka ragam ada yang sudah menggunakan footer dan ada juga yang tidak menggunakan footer semua itu tergantung pada si pembuat template tersebut. Apabila template blogspot anda hanya memiliki satu kolom footer mungkin cara ini dapat menambahkan 3 kolom footer pada template anda. Sebelumnya bisa anda perhatikan gambar dibawah ini adalah contoh tampilan template yang belum memiliki 3 kolom footer.

Setelah diedit hasil nantinya akan seperti pada gambar dibawah ini.

Untuk cara membuat 3 kolom footer seperti gambar diatas caranya sebagai berikut.
1. Silahkan login log anda kemudian menuju menu edit HTML
2. Beri tanda centang pada Expand template widget
3. Cari kode yang dibawah ini dengan menekan F3 atau CTRL+F

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

Atau bila tidak ditemukan cari kode alternatif sebagai berikut karena setiap template berbeda.

<div id='footer-wrap1'><div id='footer-wrap2'>
<b:section class='footer' id='footer'>
<b:widget id='HTML9' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
</b:section>
</div>

4. Setelah ditemukan hapus kode yang berwarna merah kemudian ganti dengan kode dibawah 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='#ffffff' width='90%'/></p><!--garis horisontal-->

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

Keterangan berdasarkan  warna:
1. Hijau : Anda dapat mengatur lebar kolom footernya dengan merubah angkanya
2. Pink : Merupakan warna garis horisontal bisa anda rubah dengan mengganti kodenya untuk melihat kode warna bisa anda lihat di Colour code
(Kode diatas akan menampilkan 3 kolom bila ingin membuat menjadi 4 kolom silahkan menambahkan kode lagi dan nanti beri nama kolomnya menjadi kolom empat seperti kolom2 sebelumnya)

5. Langkah selanjutnya anda cari kode dibawah ini

]]></b:skin>

6. Bia sudah ditemukan tambahkan kode berikut diatasnya

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

.footer-column {
padding: 10px;
}

Langkah terakhir adalah klik simpan template atau save template. Bisa anda lihat tampilan blog anda kini memiliki menu footer multy kolom. Semoga tips ini membantu anda yang mengalami kesulitan