CARA BUAT FOOTER 3 KOLOM DI BLOG
Footer 3 kolom di tempat paling bawah sidebar kadang bisa memperindah tampilan blog kita, kita bisa membuatnya menjadi 2, 3 atau 4 kolom tergantung selera kita. Pada artikel saya kali ini saya akan mencoba memberikan cara membuat footer 3 kolom. Dengan contoh script ini, bisa kita modifikasi menjadi beberapa kolom. Langsung saja saya akan memberikan caranya, tetapi jangan sampai lupa untuk memback up dulu template anda agar bisa kembali seperti sebelumnya.
1. Login ke http://draft.blogger.com/ hingga masuk Dasboard.
2. Klik Tata Letak (layout)
3. Klik tab Edit HTML
4. Kemudian cari dan temukan kode seperti di bawah ini. :
1. Login ke http://draft.blogger.com/ hingga masuk Dasboard.
2. Klik Tata Letak (layout)
3. Klik tab Edit HTML
4. Kemudian cari dan temukan kode seperti di bawah ini. :
<div id="footer-wrapper"><b:section class="footer" id="footer"></b:section></div>
5. Setelah menemukan kodenya, pada huruf yang berwarna merah diatas ganti dengan kode dibawah ini :
<div id="footer-column-container"><div id="footer2" style="float: left; margin: 0pt; text-align: left; width: 30%;"><b:section class="footer-column" id="col1" preferred="yes" style="float: left;"></b:section></div><div id="footer3" style="float: left; margin: 0pt; text-align: left; width: 40%;"><b:section class="footer-column" id="col2" preferred="yes" style="float: left;"></b:section></div><div id="footer4" style="float: right; margin: 0pt; text-align: left; width: 30%;"><b:section class="footer-column" id="col3" preferred="yes" style="float: right;"></b:section></div><div style="clear: both;"><div id="footer-bottom" style="padding: 10px; text-align: center; text-transform: lowercase;"><b:section class="footer" id="col-bottom" preferred="yes"><b:widget id="Text2" locked="false" title="" type="Text"></b:widget></b:section></div><div style="clear: both;"></div>
6. Kemudian cari code ]]></b:skin>
7. Setelah menemukan kode ]]></b:skin> di atas, selanjutnya copy code di bawah ini dan paste di atas kode ]]></b:skin>.
#footer-column-container {clear:both;}.footer-column {padding: 10px;}
8. Selesai...simpan dan lihat hasilnya.
catatan : anda bisa merubah ukuran lebar kolom dengan mengedit pada 40% atau 30%
Semoga Bermanfaat...
2 comments:
lho kok ra metu...
lho..metu no...badala tenani...sukses........
Post a Comment