Pages

Membuat Footer 3 Kolom Pada Blog

Template Blogger kian banyak macamnya. Mulai dari yang berkonsep minimalis, hingga magazine style. Beberapa template baru memiliki footer (letaknya di bawah, karena foot itu artinya kaki..hehehe) tiga kolom,  Nah, bagaimana cara menambah footer 3 kolom di Blogger atau Blogspot? Bagi anda yang malas ganti template atau sudah sreg dengan template sekarang dan ingin menambah footer 3 kolom, tips ini mungkin berguna.

Oke, langsung saja ikuti langkah dibawah ini :



1. Login ke blooger.com
2. Kemudian klik "Design", klik lagi "Edit HTML" (Beckup Buat Jaga-jaga)
3. Centang “Expand Widget Template”, kemudian cari kode berikut:
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
atau jika tidak ada, cari yang ini: <div id='footer'>
4. 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>
5. Save template dan lihat hasilnya;
6. Jika kode berwarna merah yang dimaksud nomor: 3 tidak Anda temukan, langsung saja letakan kode nomor: 4 dibawah kode: <div id='footer-wrapper'> atau <div id='footer'>blablabla...</div>
7. Bisa langsung dibawah kode: <div id='footer-wrapper'> atau <div id='footer'> saja atau dibagian bawahnya kode:...</div>, tergantung templatenya karena setiap template tidak selalu sama, oleh karena itu silakan Anda coba-coba saja dengan cara mengikuti langkah-langkah diatas. Save dan lihat lagi hasilnya.
Semoga bermanfaat....

0 komentar:

Posting Komentar