Find Here

Custom Search

Sabtu, 06 Maret 2010

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.
        1. #footer-column-container {
            clear:both; }
            .footer-column { padding: 10px; }
            1. Cari kode seperti ini :
                  1. <div id='footer-wrapper'>
                    <b:section class='footer' id='footer'>
                    </div>
                    1. Hapus kode yang saya beri warna merah diatas dan ganti kode tersebut dengan kode dibawah ini.
                          1. <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>
                              1. Simpan template.
                              2. 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.

                              0 komentar:

                              Posting Komentar

                              Setiap selesai membaca posting, sekiranya anda mau memberi komentar untuk bahan perbaikan penulisan dan posting blog ini.
                              Terima Kasih...