Tutorial Blog - Sepertinya Saya sudah lama tidak posting mengenai tutorial blog. Akhir - akhir ini memang Saya sedikit melenceng dari topik,,hehe... Sekarang mulai lagi kembali ke topik. Tutorial Blog kali ini akan membahas mengenai cara membuat 3 kolom dibawah footer pada blog. Terkadang ada beberapa template yang tidak menyediakan 3 kolom dibawah footer. Nah bagi yang ingin membuat 3 kolom footer pada blog. anda bisa mengikuti cara dibawah ini.
- Login Kedalam account Blogger anda.
- Masuk Design, Edit Html, sebelumnya download template blog anda dulu.
- Setelah itu tekan Ctrl + F cari kode dibawah ini :
<div id='footer-wrapper'>
<b:section class='footer' id='footer'/>
</div>
intinya anda cari kode ini
4. Setelah menemukan kode diatas, kemudian ganti kode yang berwarna merah dengan kode dibawah ini :
<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>
<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.Setalah selesai di ganti, kemudian cari kode ini ]]></b:skin>
6. Kemudian tambahkan kode berwarna merah dibawah ini, diatas kode ]]></b:skin>
#footer-column-container {
clear:both;
}
.footer-column {
padding: 10px;
}
clear:both;
}
.footer-column {
padding: 10px;
}
7.Setelah semua selesai Pilih Save.
Sekarang lihat hasilnya..apakah berhasil atau tidak.. jika berhasil akan ada penambahan 3 kolom add widget dibawah footer.. sekarang anda bisa lebih banyak lagi menambahakan widget.Semoga bermanfaat ya kawan... jangan lupa tingglkan coment sobat
3 komentar:
Contohnya ada ndak mas...????
Khan bisa dilihat hasilnya.
mantaap nih ilmunya :)
makasih yaa bos :D
mantaap :)
Posting Komentar