Cara Membuat Footer 3 Kolom di Blogger

Hallow sobat blogger, dihari yang cerah ini saya akan posting tentang cara membuat footer 3 kolom pada blog.

ok broo..langsung saja ikuti langkah-langkah berikut ini :

Pertama sobat Login dulu ke Blogger ->klik Rancangan ->klik Edit HTML ->Beri tanda centang pada kotak di samping tulisan Expand Template Widget.

Silahkan save dulu template anda (klik tulisan Download Template Lengkap), ini di maksudkan apabila terjadi kesalahan ketika melakukan editting pada template, kita masih punya back up data untuk mengembalikannya seperti semula.

Setelah itu, kemudian cari kode (Tekan CTRL + F untuk mempercepat pencarian sobat) seperti dibawah :

div id='footer-wrapper'>

<b:section class='footer' id='footer'/>

</div>

Setelah mendapatkan kode seperti diatas, ganti huruf yang berwarna merah dengan kode berikut:

<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;'/>

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

Jika sudah selesai klik PREVIEW/Pratinjau untuk melihat hasilnya.

Jika Tidak ada kesalahan kemudian dilanjutkan dengan menambahkan bagian css.

Cari kode seperti </ b: skin>

copy kode ini

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

.footer-column {
padding: 10px;
}

Dan paste sebelum </b:skin>

Jika sudah selesai SAVE TEMPLATE dan lihat hasilnya.

Artikel Terkait Blogging

• Membuat Icon Burung Twitter Berterbangan di Blog
• Cara Menambah Gambar Sebelum Judul Posting
• Cara Membuat Footer 3 Kolom di Blogger
• Cara Mengganti Template Blog
• Cara Membuat Blog agar SEO Friendly
• Cara Menambahkan Gambar Background Pada Blog
• Cara Membuat Tombol Share Melayang di Blog
• Cara Menambahkan Google Analytics di Blogger
• Cara Membuat Slideshow Postingan Blog
• Cara Mengetahui Blogger Sekota atau Sedaerah
• Cara Membuat Spoiler di Blog
• Cara Membuat ReadMore Otomatis di Blogger
• Cara Bikin Kotak Dengan Sudut Melengkung
• Cara Mudah Membuat Menu Tab View di Blogspot
• Cara Mudah Menghilangkan Read More Otomatis Pada Laman Blog