Find Here

Custom Search
Tampilkan postingan dengan label kolom. Tampilkan semua postingan
Tampilkan postingan dengan label kolom. Tampilkan semua postingan

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.