Cara Membuat 2, 3, 4 Kolom Footer Blog
Baiklah pada hari ini saya akan sharing cara membuat kolom footer blog di blogger dengan multi kolom yaitu 2, 3, atau 4 kolom. Problem tentang kolom footer blog ini sering sekali kita temukan di saat kita download template dari situs penyedia template atau dari default blogger sendiri dan disana tidak menyediakan widget pada footer untuk kita menempatkan elemen blog yang kita anggap pantas untuk di taruh di bagian tersebut. dan juga sebagai salah satu optimasi SEO pada loading blog.
Memang sharing cara membuat kolom di footer ini terbilang basi karena sudah banyak sekali yang posting disana - sini, tapi gak apa-apalah dari pada saya vakum posting beberapa minggu :P
Oke bagi yang ingin mempunyai Kebutuhan akan kolom pada bagian footer blog, langsung saja kita praktek.
1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, karena takut malah bikin pusing :D
2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika terjadi galat atau anda memang kurang puas terhadap hasilnya.
3. Setelah itu, cari kode ]]></b:skin> dengan menekan ctrl+f
4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Cari lagi di find kode yang kira-kira seperti ini :
7. Jika sudah klik Save Template. Lalu klik Page Element untuk melihat hasilnya.
Semoga sharing tentang cara membuat kolom footer di blogspot ini bisa membantu dalam modifikasi blog anda.
Memang sharing cara membuat kolom di footer ini terbilang basi karena sudah banyak sekali yang posting disana - sini, tapi gak apa-apalah dari pada saya vakum posting beberapa minggu :P
Oke bagi yang ingin mempunyai Kebutuhan akan kolom pada bagian footer blog, langsung saja kita praktek.
1. Login Blogger -> Klik Design -> Edit HTML -> tidak perlu centang expand template widget, karena takut malah bikin pusing :D
2. Sebaiknya Backup template anda dahulu. dengan cara klik pada Download Full Template agar anda bisa mengembalikan template anda ke kondisi semula jika terjadi galat atau anda memang kurang puas terhadap hasilnya.
3. Setelah itu, cari kode ]]></b:skin> dengan menekan ctrl+f
4. Tambahkan kode dibawah ini diatas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
5. Cari lagi di find kode yang kira-kira seperti ini :
<div id='footer-wrapper'>6. Setelah ketemu, tambahkan kode di bawah ini tepat di bawah <b:section class='footer' id='footer' showaddelement='yes'/> atau di <div id='footer-wrapper'> ( jika belum ketemu, mungkin kode seperti ini : <div id='footer'> )
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
atau
<div id='footer'>
<b:section class='footer' id='footer' showaddelement='yes'/>
</div>
Jika ingin membuat footer 2 kolom. Gunakan kode ini :
<div id='footer-column-divide'>
<div id='footer1' style='width: 50%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 50%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div style='clear:both;'/>
</div>
Jika ingin footer 3 kolom. Gunakan kode ini :
<div id='footer-column-divide'>
<div id='footer1' style='width: 33%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 33%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 33%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
Membuat footer menjadi 4 kolom. Gunakan kode ini :
<div id='footer-column-divide'>
<div id='footer1' style='width: 25%; float:left;
margin:0; text-align:left;'>
<b:section class='footer-column' id='col1'
preferred='yes' style='float:left;'/>
</div>
<div id='footer2' style='width: 25%; float: left;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col2'
preferred='yes' style='float:left;'/>
</div>
<div id='footer3' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col3'
preferred='yes' style='float:right;'/>
</div>
<div id='footer4' style='width: 25%; float: right;
margin:0; text-align: left;'>
<b:section class='footer-column' id='col4'
preferred='yes' style='float:right;'/>
</div>
<div style='clear:both;'/>
</div>
7. Jika sudah klik Save Template. Lalu klik Page Element untuk melihat hasilnya.
Semoga sharing tentang cara membuat kolom footer di blogspot ini bisa membantu dalam modifikasi blog anda.
Setelah Membaca Artikel Cara Membuat 2, 3, 4 Kolom Footer Blog jangan lupa klik LIKE yaa.. dan Semoga bermanfaat bagi sobat . Terimakasih atas kunjungan Anda serta kesediaan Anda membaca artikel ini. Kritik dan saran dapat anda sampaikan melalui kotak komentar atau di Buku Tamu. Sertakan link di bawah ini bila anda ingin COPAS.
Categories:
0 comments:
Post a Comment