Untuk menambah gadget 1 kolom, 2 kolom, 3 kolom, 4 kolom diatas footer blog juga tidak sulit. Anda cukup fokuskan pada kode <div id='footer-wrapper'> atau misalnya kode tersebut diatas tidak ditemukan pada template blog anda, mungkin kode <div id='footer'> ini yang ada di template anda karena tiap template blog berbeda-beda (jadi disesuaikan saja). Untuk mempercepat topik pembahasan, saya mulai saja bagaimana cara membuat elemen baru 1 kolom, 2 kolom, 3 kolom dan 4 kolom yang letaknya berada diatas footer blog.
A. Cara Menambah 1 Kolom di Atas Footer
1. Login ke blogger
2. Pada dasbor blogger, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode
]]></b:skin> lalu letakkan kode berikut diatasnya#footer-wrapper{width:940px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:10px}
#footer1-wrapper{width:100%;float:left;word-wrap:break-word;overflow:hidden;}
4. Cari kode seperti dibawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
</div>
5. Lalu copy kode dibawah ini dan letakkan dibawah kode warna pink
Penerapannya seperti ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
<div id='footer1-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/>
</div>
<div style='clear:both;'/></div>
6. Simpan template
B. Cara Menambah 2 Kolom Diatas Footer
1. Login ke blogger
2. Pada dasbor blogger, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode
]]></b:skin> lalu letakkan kode berikut diatasnya#footer-wrapper{width:940px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:10px}
#footer1-wrapper{width:50%;float:left;word-wrap:break-word;overflow:hidden;padding:0 auto}
#footer2-wrapper{width:50%;float:right;word-wrap:break-word;overflow:hidden;padding:0 auto}
4. Cari kode seperti dibawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
</div>
5. Lalu copy kode dibawah ini dan letakkan dibawah kode warna pink
Penerapannya seperti ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
<div id='footer1-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/></div>
<div id='footer2-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'/></div>
<div style='clear:both;'/>
</div>
6. Simpan template
C. Cara Menambah 3 Kolom Diatas Footer
1. Login ke blogger
2. Pada dasbor blogger, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode
]]></b:skin> lalu letakkan kode berikut diatasnya#footer-wrapper{width:940px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:10px}
#footer1-wrapper{width:305px;float:left;margin-right:10px;word-wrap:break-word;overflow:hidden}
#footer2-wrapper{width:305px;float:left;margin-right:10px;word-wrap:break-word;overflow:hidden}
#footer3-wrapper{width:305px;float:left;word-wrap:break-word;overflow:hidden}
4. Cari kode seperti dibawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
</div>
5. Lalu copy kode dibawah ini dan letakkan dibawah kode warna pink
Penerapannya seperti ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
<div id='footer1-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/></div>
<div id='footer2-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'/></div>
<div id='footer3-wrapper'>
<b:section class='footer' id='footer3' preferred='yes'/></div>
<div style='clear:both;'/>
</div>
6. Simpan template
D. Cara Menambah 4 Kolom Diatas Footer
1. Login ke blogger
2. Pada dasbor blogger, pilih Template => Edit HTML
3. Tekan Ctrl+F, cari kode
]]></b:skin> lalu letakkan kode berikut diatasnya#footer-wrapper{width:940px;text-align:left;font:normal normal 12px Arial, Tahoma, Helvetica, FreeSans, sans-serif;margin:0 auto;padding:10px 0}
#footer1-wrapper{width:225px;float:left;margin-right:10px;word-wrap:break-word;overflow:hidden}
#footer2-wrapper{width:225px;float:left;margin-right:10px;word-wrap:break-word;overflow:hidden}
#footer3-wrapper{width:225px;float:left;margin-right:10px;word-wrap:break-word;overflow:hidden}
#footer4-wrapper{width:225px;float:left;word-wrap:break-word;overflow:hidden}
4. Cari kode seperti dibawah ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
</div>
5. Lalu copy kode dibawah ini dan letakkan dibawah kode warna pink
Penerapannya seperti ini
<div id='footer-wrapper'>
<b:section class='footer' id='footer' preferred='yes'/>
<div id='footer1-wrapper'>
<b:section class='footer' id='footer1' preferred='yes'/></div>
<div id='footer2-wrapper'>
<b:section class='footer' id='footer2' preferred='yes'/></div>
<div id='footer3-wrapper'>
<b:section class='footer' id='footer3' preferred='yes'/></div>
<div id='footer4-wrapper'>
<b:section class='footer' id='footer4' preferred='yes'/></div>
<div style='clear:both;'/>
</div>
6. Simpan template
Keterangan :
1. Ubah kode width:940px dengan lebar footer blog anda
2. Untuk warna biru (lebar dari masing-masing kolom baru), anda sesuaikan saja
Silahkan anda coba untuk cara menambah elemen 1 kolom, 2 kolom, 3 kolom, 4 kolom diatas footer, semoga bermanfaat.
