Membuat 3 Kolom Footer

Halloo sobat semuanya langsung aja dibawah ini adalah cara membuat footer 3 kolom . Artinya kita menambahkan 3 bagian untuk menambah gadget baru di bagian bawah BLOG kita. Dan waktu itu Footer Blog saya cuma 2 kolom dan saya rubah 3 kolom. Setelah saya browsing ternyata cara ya seperti dibawah ini. 

Tanpa basa basi lagi, sekarang kita ke langkah-langkah pembuatannya.

1. Masuk ke Menu Layout/Tata Letak
2. Masuk ke mode Edit HTML dan jangan lupa untuk mencentang Expand Widget Template
3. Back up terlebih dahulu template sobat untuk mengantisipasi terjadinya ERROR.
4. Cari kode seperti dibawah ini, tekan CTRL+F untuk mempercepat pencarian:

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

5. Ganti kode yang berada pada baris kedua diatas, yakni <b:section class='footer' id='footer'/> (Kode ini kadang-kadang beda...tergantung template blog) 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;'/>


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

Perhatikan kode yang berwarna merah width: 30% width:40% width: 30%, itu kalo di total berarti akan 100%, yakni lebar template sebelum dibagi-bagi. Jadi dengan kode tersebut, kita akan membagi 3 kolom tersebut dengan lebar kolom pertama 30%, lebar kolom kedua 40% dan lebar kolom ketiga 30%.

6. Cari kode </b:skin>
7. Letakkan kode dibawah ini diatas kode </b:skin>

#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}

8. Simpat template sobat dan liat hasilnya pada bagian Page Elemen. Sekarang template sobat sudah mempunyai 3 kolom footer tambahan.

Semoga bermanfaat... dan sekses buat anda.

9 out of 10 based on 10 ratings. 9 user reviews.

Related Post:

Tips Blogspot

• Cara Memasang Tombol Share Facebook, Twitter dan Google+ Di Bawah Judul Artikel
• Membuat Slide Menu horisontal dibawah posting
• Cara Mudah Pasang YM Di Blog
• Cara Pasang Rich Snippet Di Blogspot Dengan Mudah
• Membuat Bounce & Share - Widget Social Bookmarking Blogger
• Mengganti Tulisan Older Post dan Newer Post Dengan Judul Arrtikel
• How to Install Related Posts Widget related links at the side column (OK)
• Cara Menambah Gadget diatas Header
• Hidden Chatbox
• Widget artikel terkait / Related post dgn Scroll
• Code Color
• Edit Lebar Posting Pada Template
• Cara Memasang Button Share Artikel Di Blog
• Top 15 Most Popular Social Bookmarking Websites | August 2012
• Cara Update Blog Ke Webrank Stats
• 5 Tools For Tracking Your Digital PR Campaigns
• Membuat Widget Like Facebook Melayang
• membuat scroll pada artikel terkait / related post
• New WordPress plugin: Tag Pages
• Cara Membuat Artikel Terkait Dengan Gambar
• CARA MENGUKUR KECEPATAN BLOG
• Kode Warna ( Color Code )
• Membuat Back To Top Button (100% OK)
• Effect Scroll Text pada artikel tertentu

Widget by [ Iptek-4u ]

Posted in: Tips Blogspot