Mengingat adanya keterbatasan disetiap template padahal kita masih banyak yang harus dipasang diblog baik artikel, iklan, dan lain sebagainya, dengan keterbatasan template tersebut saya akan mencoba membantu secara sederhana bagaimana cara membuat widget fotter blog menjadi beberapa kolom caranya sebagai berikut :
1. Login ke blogger anda
2. Klik rancangan dan klik Edit HTML
3. Agar temple anda aman dan bisa dikembalikan kalau ada masalah setelah melakukan perubahan backup terlebih dahulu template anda dengan cara klik pada download full template, terus simpan di computer anda.
4. Setelah melakukan download templete cari kode ]]></b:skin>
5. Setelah ketemu copy paste script dibawah ini di atas kode ]]></b:skin>
3. Agar temple anda aman dan bisa dikembalikan kalau ada masalah setelah melakukan perubahan backup terlebih dahulu template anda dengan cara klik pada download full template, terus simpan di computer anda.
4. Setelah melakukan download templete cari kode ]]></b:skin>
5. Setelah ketemu copy paste script dibawah ini di atas kode ]]></b:skin>
#footer-column-divide {
clear:both;
}
.footer-column {
padding: 10px;
}
clear:both;
}
.footer-column {
padding: 10px;
}
6. Langkah selanjutnya adalah cari kode seperti dibawah ini
<div id='footer-wrapper'>
7. Setelah ketemu langkah no.5 copy paste script di bawah ini tepat dibawahnya no. 5
7. Setelah ketemu langkah no.5 copy paste script di bawah ini tepat dibawahnya no. 5
Anda tinggal pilih script di bawah ini sesuai dengan kebutuhan anda mau berapa kolom 2, 3 atau 4 kolom :
Script untuk 2 kolom widget
<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>
<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>
Script untuk 3 kolom widget
<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>
<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>
Script untuk 4 kolom widget
<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>
<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>
8. Setelah melakukan semua langkah di atas terus simpan template dan lihat hasilnya di rancangan
Contoh :
SEMOGA BERHASIL……
0 komentar:
Posting Komentar