Cara Menambah 3 Kolom di Bawah Footer

AW - Cara Menambah 3 Kolom di Bawah Footer. Malam semua, pada kesempatan kali ini gue ingin share tentang Cara Menambah 3 Kolom pada Blog, semua sudah tau apa itu footer kan? yup, bagian paling bawah dari template blog disebut footer, yang ingin gue sahe kali ini Cara Membuat 3 Kolom pada Blog atau Menambahkan jumlah kolom widget di footer blog. Bagi agan yang memiliki template blog yang hanya mempunyai satu kolom footer di Blog agan, tapi ingin menambah jumlahnya tetapi tidak mau mengganti template lagi? agan sangat tepat membaca cara menambah atau membuat Footer 3 kolom pada Blog. Ok sob silahkan ikuti tutorialnya.


Tutorial:

  • Login ke Blogger.
  • Masuk ke dashboard, lalu pilih Template dan pilih Edit HTML.
  • Klik Expand Template Widget, dengan cara cari code "<b:skin>" tanpa tanda petik, lalu klik panah disampingnya.
  • Lalu cari code "]]></b:skin>"(Ctrl+f, agar lebih mudah mencari).
  • Lalu copy dan paste code berikut tepat diatas code "]]></b:skin>".

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

  • Kalau sudah agan cari lagi code <div id='footer'> Atau id='footer'.
  • Lalu copy code berikut tepat dibawah 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>

  • Klik Simpan Template.
  • dan Selesai.

0 komentar: