Cara Mudah Menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom Diatas Footer -Tested Gan -



Tutorial ini sudah seringkali saya coba dan alhamdulillah sukses.
Berikut ini cara membuat Multi Kolom/penambahan kolom di Footer Blogspot anda:

1. Login ke Blogger
2. Pilih Template => Edit HTML
3. Backup template (Download Full Template)
4. Tekan F3, cari kode ]]></b:skin>

Lalu letakkan kode berikut diatas kode tadi:
#footer-column-divide {clear:both;}.footer-column {padding: 10px;}
5. Selanjutnya cari kode seperti dibawah ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
atau bisa juga cari kode seperti dibawah ini:
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
6. Letakkan kode berikut ini dibawah kode diatas tadi:

<b:section class='footer' id='footer' showaddelement='yes'/> atau <b:section class='footer' id='footer' />
Apabila tidak ada kode: <b:section class='footer' id='footer' showaddelement='yes'/> maka tambahkan aja kode berikut dibawah kode tadi:
<div id='footer'>


Kode untuk Menambah 2 Kolom Diatas Footer
<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>
Hasilnya dari menambah 2 kolom di footer seperti gambar dibawah ini


Kode untuk Menambah 3 Kolom Diatas Footer
<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>
Hasilnya dari menambah 3 kolom di footer seperti pada gambar dibawah ini:


Kode untuk Menambah 4 Kolom Diatas Footer:
<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>
Hasil dari menambah 4 kolom di footer seperti gambar dibawah ini:



Demikian tadi cara mudah menambah 1 Kolom, 2 Kolom, 3 Kolom, 4 Kolom diatas Footer.

Semoga bermanfaat,

Thanks to: Agan Blogger
Share on Google Plus

About Fulldesainer

    Blogger Comment
    Facebook Comment

0 comments:

Post a Comment



Ada yang perlu Anda tanyakan?Link error,kritik dan saran..?Silahkan sampaikan di kolom komentar dibawah ini.

1. Klik select profile -->> pilih Name/URL.
2. Isi nama Anda dan isi URL dengan alamat Facebook Anda/ kosongkan saja.
3. Klik Lanjutkan.
4. Ketik komentar anda dan klik PUBLISH.
5. Bagi yang belum bisa berkomentar dengan HTML,silahkan klik disini.
6. Komentar yang kurang sopan,Spam/SARA otomatis akan kami hapus.

Terimakasih atas kunjungan Anda.