Home » , , » Cara Membuat Footer 3 Kolom di Blog ( Di Bagian Bawah )

Cara Membuat Footer 3 Kolom di Blog ( Di Bagian Bawah )




Cara Membuat Footer 3 Kolom di Blog

Cara Membuat Footer 3 Kolom di Blog - Setelah sebelumnya Dunia Ilmu sudah menjelaskan Cara Mudah Validasi XHTML pada Blog (Part 3) maka kali ini saya ingin menjelaskan bagaimana cara membuat footer 3 kolom di blog. Jadi disini kita akan membuat 3 kolom widget di footer blog secara manual. Baik, ikuti instruksi di bawah ini dengan benar agar hasilnya memuaskan. Contoh Footer 3 Kolom bisa dilihat pada gambar diatas.

Cara Membuat 3 Kolom Widget pada Footer Blogspot

1. Login ke blog kalian masing-masing.
2. Setelah Login, klik Template => Edit HTML => centang Expand Template Widget
3. Selanjutnya, cari code ]]></b:skin>  (gunakan ctrl+f untuk memudahkan mencari)
4. Copy code di bawah ini dan paste tepat di atas code ]]></b:skin>
 #footer-column-container {
    clear:both;
    }
    .footer-column {
    padding: 10px;
    }
5. Lalu carilah code <div id='footer'> atau id='footer'
6. Letakkan code di bawah ini tepat di bawah code <div id='footer'> atau id='footer'
<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>
7. Preview untuk melihat hasilnya. Jika tidak ada kesalahan, Save Template
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Anggi Rocker

3 komentar:

  1. Waahh... sangat membantu ni.. thank gan

    http://googreenkaltim.blogspot.com/2013/01/aktifitas-2-tambang-di-tahura-bukit.html
    Coment back

    ReplyDelete

Terima kasih telah berkunjung ^_^ ! Silahkan tinggalkan komentar untuk respon/pertanyaan.
[-] jangan berkomentar SPAM (promosi, dll,)
[-] jangan komentar yang berisi link hidup,
[-] jangan berkomentar yang tidak relevan dan berkualitas rendah ,karena akan saya abaikan dan tidak akan saya Approve. Maaf apabila ada komentar yang belum saya tanggapi karena saya tidak online 24 Jam. Terima kasih.
SERING-SERING BERKUNJUNG SOBAT

 
Support : Google Impact | Google.com
Copyright © 2013. 1# | Knowledge and inspiration - All Rights Reserved
Template Modify by Anggirocker
Proudly powered by Blogger