Membuat Footer Jadi 3 Kolom

Serunya punya blog gratis dari blogger ya ini, setiap pemilik blog bisa berkreasi sendiri atas blog yang dipunya. Banyak teknik yang bisa ditempuh dan hampir keseluruhan mudah untuk dilakukan. Mudah, asal tahu. Tapi tidak perlu khawatir, sudah terlalu banyak yang membagi ilmu dalam berkreasi untuk mempercantik blog. Karena intinya ada di HTML kode. Kode-kode rumit itulah yang menjadi kunci untuk berkreasi, bisa merubah, menambah atau mengurangi isi tampilan dari blog.

Bagaimana kalau anda juga berkreasi dengan tampilan blog anda? Tampil beda akan menyegarkan pengunjung yang sudah datang ke blog anda dan tentunya juga menarik minat pengunjung baru... Yuhuuuuu!

Mulai bersemangat yaaa... Mari kita mulaiiiii....!

Hari ini tentang membuat footer menjadi tiga kolom, kenapa? Karena bisa dimanfaatkan untuk banyak hal. Misal untuk kolom iklan, buku tamu, recent post/comment, memasang widget lain yang mendukung blog anda dan banyak lagi. Kreasikan sendiri saja kegunaannya...

Read More

Membuat 3 Kolom Pada Footer

Mungkin beberapa diantara anda ada yang ingin footer pada blog-nya menjadi tiga kolom? Saya beritahu secara ringkas dan cepat saja ya...

1. Login ke blogger.com
2. Masukkan username dan password
3. Pilih tab Tata Letak
4. Klik Edit HTML.
5. Cari kode HTML seperti ini : </ : skin>
6. Copy kode dibawah ini tepat diatas kode yang saya tunjukkan diatas.
#footer-column-container {
clear:both; }
.footer-column { padding: 10px; }
7. Cari kode seperti ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'>
</div>
8. Hapus kode yang saya beri warna merah diatas dan ganti kode tersebut 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>
<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>
<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>
<div style='clear:both;'/>
<p>
<hr align='center' color='#ffae00' width='90%'/></p>
<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>
9. Simpan template.
10. Lihat hasilnya dengan pilih tab Edit Laman.

Berarti ini cuma 10 langkah mudah... Dan bila ada pesan error perhatikan kode </div>, karena jangan sampai ada kode yang tidak di copy.