Senin, 17 Oktober 2011

Cara Menambah 3 Kolom Footer di Blogger Template

Panduan dan tutorial membuat 3 kolom footer blogspot.

Belum lama ini Saya baru saja mengganti template yang Saya peroleh dari hasil download di Btemplates, tetapi Saya masih kurang puas karena footernya tidak memiliki kolom, sementara Saya memerlukan adanya kolom minimal 3 kolom di bagian footer template untuk blog Saya. Untungnya Saya masih menyimpan diary tentang cara menambah 3 kolom footer, akhirnya Saya tambahkan saja footernya dengan 3 kolom lagi.

Nah, pada panduan dan tutorial gratis kali ini Saya ingin menulis tentang cara menambah 3 kolom footer di blogger template. Untuk menambah 3 kolom footer, Saya melakukan langkah-langkah seperti ini:

1. Login ke blooger.com
2. Kemudian klik "Design", klik lagi "Edit HTML"
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 membantu.

Tidak ada komentar:

Posting Komentar

please do not spam right now !!!

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.