Jumat, 26 Februari 2010

menambahkan Footer 3 Kolom

Mengedit template blogger untuk memiliki footer 3 kolom untuk template blogger ternyata bukan perkara yang sulit, namun sangatlah mudah, hanya butuh beberapa menit waktu anda. Mungkin rekan-rekan blogger menganggap ini perkerjaan rumit, yah silahkan saja menganggap begitu, namun tunggu dulu baca tutorial ini, pasti anda akan heran.

Pemberitahuan jika anda akan mengedit blog anda maka di sarankan anda harus menyimpan template anda dengan cara Download Template Lengkap. Pada submenu Edit HTML. Agar bila terjadi kegagalan anda dapat mengembalikannya seprti semula dengan mengunggahnya kembali.


ok !!! langsung saja ke pokok pembahasan???

  1. Login pada Blog anda
  2. Pilih Tab Tata Letak
  3. Pilih Sub Menu Edit HTML
  4. Kemudian klik “Expand Widget Template
  5. Lantas save template anda kalau-kalau terjadi kesalahan
  6. Kemudian temukan ini.

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

5. Ganti kode yang berwarna merah dengan kode berikut:

<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='#5d5d54' 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>

0 komentar: