Topics :
Home » » Cara Menambah dan Memasang Footer 3 Kolom di Blog

Cara Menambah dan Memasang Footer 3 Kolom di Blog

Ungkit - Cara menambah dan memasang footer 3 kolom pada Blogspot. Kembali pada Template Blogspot pada Blog. Berikut ada lagi bagaimana sich Cara ataupun Tutorial untuk Menambah dan Memasang Footer pada Blog Kita.

Berikut panduan gratis hasil copasan dan sudah pernah saya terapkan di Blog Gratisan ane hehee..
Cara Menambah dan Memasang 3 kolom footer pada Blog :

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

Source

1 komentar :