Wednesday, December 14, 2011

membuat footer 3 kolom blog

Sebelumnya saya umumkan bahwa tutorial ini khusus untuk blogger beta (layout), oke langsung saja.
  1. Seperti biasa login ke blogger.com
  2. Kemudian klik “Expand Widget Template”
  3. Lantas save template anda kalau-kalau terjadi kesalahan
  4. Kemudian temukan ini:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
5. Ganti tag yang berwarna merah dengan script 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>
6. Save template anda!
Selamat anda telah mempunyai footer 3 kolom di blogger anda. Untuk melihat hasilnya, anda kembali ke “page element” lalu lihat bagian footer, pasti ada 3 tempat untuk menempatkan page element. Nah silahkan anda taruh page element yang anda inginkan di footer 3 kolom blogger blogspot anda.
Semoga bermanfaat dan selamat mencoba.


0 comments:

Post a Comment